Javascript help.

I know this is not a javascript forum but many cf developers are good with javascript and I'm not one of them.
I need to fix a javascript bug inside my CF application and I've spent sometimes looking at it unfortunately I'm not sure how to fix it. It looks simple, had this one be in CF I should've been able to fix it myself but this is javascript which I will need some help if possible.

This script is created for a dynamic generation of a pair of textboxes on a form.
In the form there are 2 texboxes side by side.
The left texbox is labelled: Name and the right textbox is labelled: Salary
When user needs an additional pair of textboxes, user will click on this link to add a pair of textboxes. User can add pair of texboxes as many as he/she like. He/she just need to click on:

<!--- Adding more empty fields --->
<tr>
<td><p id="FirstGroup"></td>
</tr>
<tr>
<td><a href="javascript:addInput()">Click here to add more input field(s)</a></td>
</tr>
<tr>

And this is the complete script: (see below)
<!--- Script to add more text fields when needed --->
<script type="text/javascript">

// declare a dynamic Array in javascript
var arrInput = new Array(0);
var arrInputValue = new Array(0);

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

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

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

function createInput(id,value) {
return " <table border='0' width='526' cellpadding='1' cellspacing='1'><tr>
<td>
<input name='emp_name' type='text' id='emp_name "+ id +"' onChange='javascript:saveValue("+ id +",this.value)' value='"+ value +"' size='40'>
</td>
<td>
<input name='salary' type='text' id='salary "+ id +"' onChange='javascript:saveValue("+ id +",this.value)' value='"+ value +"' size='50'>
</td>
</tr></table>";

}

//End
</script>

The bug is:
When Tony Smith is typed in to the name textbox on the left, $60.000 is typed into the salary textbox and then user click on to add a pair of textboxes link :<a href="javascript:addInput()">add a pair of texboxes</a>
The name field with Tony Smith got changed into $60.000
In other words, once the user click on :<a href="javascript:addInput()">add a pair of texboxes</a> the name field is populated with salary info.
It looks like the array only recognizes 1 element value, the salary.

Please help!