Get templates and go to next

Hello i'm hoping someone can help i know i am close but don't know what i'm missing.  basically i have a form with 16 sets of 4 page templates.  (StaffMem1A, StaffMem1B, StaffMem1C, StaffMem1D, StaffMem2A, etc.) basically i am adding the amount sets needed based on the number given is a dropdown.  but what i also want it to do is spawn the next set if the previous set is already visible.  example: if the dropdown has 2 for the first time, then sets StaffMem1 and StaffMem2 appear.  if the person selects 4 from the drop down, then StaffMem 3-6 appear and so on.  here is what i have so far.  the first while loop was to see which ones were visible, but that is not working for me.  i have both codes sets listed the first is in the button, then second is in the document.

(Button)

var i = this.getField("StaffAddCount").value;
i++;
var x = 1;
var TempName1 = "StaffMem1A";
var TempName2 = "StaffMem1B";
var TempName3 = "StaffMem1C";
var TempName4 = "StaffMem1D";
var TempNameTest = "StaffMem1A";

while (this.getTemplate(TempNameTest).hidden=true){
    var NewTempName1 = TempName1.replace(1,x);
    x++;
    i++;
} ;

do {
    var NewTempName1 = TempName1.replace(1,x);
    var NewTempName2 = TempName2.replace(1,x);
    var NewTempName3 = TempName3.replace(1,x);
    var NewTempName4 = TempName4.replace(1,x);
    this.getTemplate(NewTempName1).spawn(this.numPages,false,false);
    
    x++;
} while (x<i);

(Document)

function tmpl(pg)
{
var tmps=this.templates;
for(var i=0; i<tmps.length;i++)
{
if(tmps[i].name==pg)
{
tmps[i].spawn(this.numPages,false,false);break;
}
}
}