add fields with click of button..input disappearing

I have a form I am using to take a list of band members. It includes the member name and the instrument they play.


my problem is I can enter the first set of info, and once I click the add another member button..the information I entered is removed, but, the new fields are added. I want to keep the information typed and also add a field.



<script language="Javascript" type="text/javascript">

<?php

//this script is to make sure that the session data is put back into the
//member fields if they are updated

$memnum = 1;

while ($_SESSION['member'.$memnum] != ""){
$memnum++;
}
if ($memnum >= 2){
echo "var membernumber = " . $memnum;
}
else {
echo "var membernumber = 2;";
}

?>

function generateRow() {

var d=document.getElementById("members_area");
d.innerHTML+="<li>Name: <input name=member"+membernumber+" type='text' id=member"+membernumber+"> Instrument: <input name=instrument"+membernumber+" type='text' id=instrument"+membernumber+"></li>";

}


</script>




html


<ol id ="members_area">

<?php

if ($_SESSION[member1] != ""){

$i = 1;

while ($_SESSION['member'.$i] != ""){
echo "<li>Name: <input name=\"member" . $i . "\" type=\"text\" id=\"member" . $i . "\" value=\"" . $_SESSION['member'.$i] . "\" /> Instrument: <input name =\"instrument" . $i . "\" type=\"test\" id=\"instrument" . $i . "\" value=\"" . $_SESSION['instrument'.$i] . "\" ></li><br /> ";
$i++;
}
}

else {
echo "<li>Name: <input name=\"member1\" type=\"text\" id=\"member1\" /> Instrument: <input name=\"instrument1\" type=\"text\" id=\"instrument1\"></li>";
}

?>


</ol>

<div id="div"></div>
<p><input type="button" value="Add Another Member" onclick="generateRow()"/></p>

<br />
<br />
<input type="button" value="<< BACK" onclick="window.location.href='http://www.somewhere.com/sign_up/final/signup1.php'">
<input type="submit" name="submit" value="NEXT >>" />

If you are using method="post", try
value=\"" . htmlentities($_POST['member'.$i] ). "\" (or else try with $_GET there)

Sorry,

I included the php because it was part of the code.

The JAVA script is not working.



<script>
var membernumber = 2;


function generateRow() {

var d=document.getElementById("members_area");
d.innerHTML+="<li>Name: <input name=member"+membernumber+" type='text' id=member"+membernumber+"> Instrument: <input name=instrument"+membernumber+" type='text' id=instrument"+membernumber+"></li>";

}

</script>



I open the page.

I see 1 set of fields member name and instrument
I type something into those fields.
I hit add another member button

the information I entered disappears...the new fields are added, but I have to go back and reenter the information.

This is a javascript issue, I think.

Can anyone help?

thanks