Dynamic textboxes?

I'm really super new to javascript, so bear with me... I've edited this post like 20 times already.

I'd like to have a form where, if the user starts typing in a textbox, a new textbox will automatically appear.

I should specify that I'm using this in conjunction with php. Ideally, once a user clicks in a textbox:

<input type="text" name="thisthing[]" value="">

Code (markup):

A new textbox will appear beneath it:

<input type="text" name="thisthing[]" value="">

Code (markup):

I came up with this, which will continue to add textboxes, but there are three problems with it: (1) I can't seem to type in the added textboxes, (2) if I click in textbox A, textbox B appears. Great! But, if I click in textbox A again, textbox C appears. I don't want that. It shouldn't add another textbox if I've already clicked in one... and (3) it clears the entered text in boxes 2+ every time a new textbox is created...

<script language="javascript">
function changeIt()
{
var i = 1;
my_div.innerHTML = my_div.innerHTML +"<input type='text' name='thistextbox[]' onClick='changeIt()'><br />"   

}
</script>

<form name="form" action="post" method="<? echo $PHP_SELF; ?>">

<input type="text" name="thistextbox[]" onClick="changeIt()">   
<br />
<div id="my_div"></div>
<P><input type="submit" name="submit" value="Submit">
</form>

Code (markup):

 

recoded what you did .. according to the way i understood what you needed

<script language="javascript">
function changeIt(i)
{
	if ( (arrInputs.length - 1) == i ) {
		
		arrInputs[i+1] = document.createElement("input"); 
		arrInputs[i+1].setAttribute("type","text");
		arrInputs[i+1].setAttribute("name","thistextbox[]");
		arrInputs[i+1].onclick = function(){changeIt(i+1); }
		var divs = document.getElementById("my_div");
		divs.appendChild(arrInputs[i+1]);
		var temp =  document.createElement("br");
		divs.appendChild(temp);
	}
}
var arrInputs = new Array(document.getElementById("thistextbox"));
</script>

<form name="form" action="post" method="<? echo $PHP_SELF; ?>">

<div id="my_div">
<input type="text" name="thistextbox[]" onclick="changeIt(0)">   
<br />
</div>
<P><input type="submit" name="submit" value="Submit">
</form>

Code (markup):