I am creating a form and each anime may have several names so i have the name field and the name-type field for each name as a whole. As there may be more than one name as a whole i have a javascript that adds a new set as many as is needed.

My code is:

In the <head>
Code JavaScript:
function addInput() {
  display();
}
 
function display() {
 
  document.getElementById('parah').innerHTML+=createInput();
 
}
 
function createInput() {
  return "<fieldset>		<legend>Anime Name</legend>	<dl>	<dt><label for=\"user\">Name</label><br /><span>Primary name of anime for site.</span></dt>	<dd><input name=\"animename[]\" type=\"text\"></dd>	</dl>	<dl>	<dt><label for=\"user\">Name Extra</label><br /><span>Additional info: French, German etc.</span></dt>	<dd><input name=\"animenametype[]\" type=\"text\" ></dd>	</dl>	</fieldset>";
}

And in the body:
Code HTML4Strict:
<fieldset>
		<legend>Anime Name</legend>
	<dl>
	<dt><label for="user">Name</label><br /><span>Primary name of anime for site.</span></dt>
	<dd><input name="animename[]" type="text" required="1"></dd>
	</dl>
	<dl>
	<dt><label for="user">Name Extra</label><br /><span>Additional info: French, German etc.</span></dt>
	<dd><input name="animenametype[]" type="text" required="1"></dd>
	</dl>
	</fieldset>
 
 
	<div id="parah"></div>
<a href="javascript:addInput()">Add more Name(s)?</a><br>

Now i can add as many as i like and it will process it all correctly.

My problem is say i write some data into the static (html coded) fields and then add a new one its fine. I enter some data into the new ones then add another. After a second one is added i loose the data i entered previously.

It all works well if i add as many fields as i need before entering anything but would really like to (for ease of use) add one, fill it in, add onther, fill it in and so on.

Wandering if there was a way to preserve any info already added.