dynamic input field

[developing]

does anyone know how to implement this feature from here: http://www.wax-bar.co.uk/reservations/?type=guestlist

Click on add another guest and it creates another input field, i got it to work using javascript:

var arrInput = new Array(0);
var arrInputValue = new Array(0);

function addInput() {
arrInput.push(arrInput.length);
arrInputValue.push("");
display();
}

function display() {
document.getElementById('parah').innerHTML="";
for (intI=0;intI<arrInput.length;intI++) {
document.getElementById('parah').innerHTML+=createInput(arrInput[intI], arrInputValue[intI]);
}
}

function saveValue(intId,strValue) {
arrInputValue[intId]=strValue;
}

function createInput(id,value) {
return "<input type='text' id='test "+ id +"' onChange='javascript:saveValue("+ id +",this.value)' value='"+ value +"'><br>";
}

function deleteInput() {
if (arrInput.length > 0) {
arrInput.pop();
arrInputValue.pop();
}
display();
}

And in the html body:

<div>
<p><a href="javascript://" id="addperson">+ Add another guests</a></p>
<script type="text/javascript">
var count = 2; // The one that's already there is 1
Event.observe('addperson', 'click', function() {
count++
var namefield = '<div id="firstname"><p><label for="name_'+count+'" guests">Full name:</label><input class="inputField" name="names[]" type="text" id="name_'+count+'" /></p></div>';
new Insertion.Bottom('firstname', namefield)
});
</script>
</div>

the problem is that only the firstname is passed to the php script and any other input created doesn't appear????