As part of my form I have a box for the user to input the number of text boxes needed. I already have the page creating the textboxes but do not know the IDs of each text box.
Once the user adds textboxes they can click add again to create more. If the user previously added 3 textboxes and now enters 4 I want the program to just add one more instead of 4 more.

The function I am using is:

function add(type) {
var num=(document.getElementById('NoOfValues').value)-0;
for (i=1;i<=num;i=i+1)
{
//Create an input type dynamically.
var element = document.createElement("input");
//Assign different attributes to the element.
element.setAttribute("type", type+i);
element.setAttribute("name", type+i);
var foo = document.getElementById("fooBar");
//Append the element in page (in span).
newline=document.createElement("br");
foo.appendChild(newline);
foo.appendChild(element);
}
}

(NoOfValues is the text box that the user inserts how many textboxes they want added)

This is where I call the function:

<span id="fooBar"><input onclick="add('Textbox')" type="button" value="Add" style="visibility:hidden" name="cmdAddValues"/></span>


Im wondering:
1. what the IDs of the new textboxes are?
and
2. how to check if textboxes have already been added so that extras arent added....(e.g. the user adds 3 and then types in 4 and clicks add.....in total I only want 4 textboxes and not 7)

any help on this is really appreciated!