Adding a group of form fields on the fly

I’m new to Javascript and not sure what needs to be done to the following script to make it work. I’m trying to add a set of fields on the fly to a form. If a store owner has multiple locations they can add as many as they want by clicking a button. I found this script in this forum but it doesn’t seem to work correctly. If you click add new location it adds the new set of fields but erases the contents of the previous set of fields. What’s wrong here?

Script:


 function addInput() {
   display();
 }

 function display() {
   var cnt = document.getElementById('hdnCounter').value;
   var intI = parseInt(cnt) + 1;
   document.getElementById('hdnCounter').value = intI;
   document.getElementById('parah').innerHTML+=createInput(intI, '');
 }

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

 function createInput(id,value) {
   return "<table width='700' border='0' align='center' cellpadding='2' cellspacing='0'><tr><td colspan='2'><strong>Additional Shipping Location</strong></td></tr><tr><td width='112' align='right'>Store Name:</td><td><input type='text' size='70' id='store2"+ id +"' onChange='javascript:saveValue("+ id +",this.value)' value='"+ value +"'  name='store2"+ id +"'></td></tr><tr><td align='right'>Address:</td><td><input type='text' size='70' id='s2address"+ id +"'  name='s2address"+ id +"' onChange='javascript:saveValue("+ id +",this.value)' value='"+ value +"'></td></tr><tr><td align='right'>Address 2:</td><td><input type='text' size='70' id='s2sddress2"+ id +"' onChange='javascript:saveValue("+ id +",this.value)' value='"+ value +"' name='s2address2"+ id +"'></td></tr><tr><td align='right'>City:</td><td><input type='text' size='50' id='city2"+ id +"' onChange='javascript:saveValue("+ id +",this.value)' value='"+ value +"' name='city2"+ id +"'></td></tr><tr><td align='right' valign='top'>State:</td><td><input type='text' size='20' id='state2"+ id +"' onChange='javascript:saveValue("+ id +",this.value)' value='"+ value +"' name='state2"+ id +"'></td></tr><tr><td align='right'>Zip:</td><td><input type='text' size='20' id='zip2"+ id +"' onChange='javascript:saveValue("+ id +",this.value)' value='"+ value +"' name='zip2"+ id +"'></td></tr></table>";

 }

HTML:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Test Address</TITLE>

<script type="text/javascript" src="/dealerud/additional3.js"></script>
</HEAD>

<BODY>
<input type="hidden" value="0" id="hdnCounter" name="hdnCounter" />
<div id="parah">
</div>
<input type="button" name="abcd" value="Add Additional Shipping Location" onclick="addInput();"/>
</BODY>
</HTML>