dynamically add questions to form

how can i save the data?

[WhosAWhata]

I'm trying to create a form where the user can add any number of textareas. I have working code, the only issue is that when another textarea is added, the previous textareas lose their values (become blank). I was thinking of creating a for loop to back up the values and then reset them, but i'm nt sure how to dynamically create the document.form.ans#.value link

my current code is

 <script language="JavaScript">
 var qcnt = "1";
 function addquestion(){
 qcnt++;
 document.all.cnt.innerHTML = '<input type="hidden" name="count" value="' + qcnt + '">';
 document.all.qs.innerHTML = document.all.qs.innerHTML + '<br>Answer'+qcnt+':<textarea name="ans'+qcnt+'"></textarea>';
 }
 </script>
 <form action="<?=$PHP_SELF?>" method="post" name="form">
 <div id="cnt"><input type="hidden" name="count" value="1"></div>
 <div id="qs">Answer1:<textarea name="ans1"></textarea></div>
 <input type="button" value="Add Answer" onclick="addquestion();">
 <input type="submit" name="submit" value="Create!">
 </form>

[Bernard Marx]

The form elements are losing their values because you're using innerHTML to add new elements. Use DOM methods (createElement, appendChild) instead.

[WhosAWhata]

how would i use that to add the textarea into the div?

[WhosAWhata]

I've figured most of it out, but it isn't displaying properly. In firefox it adds the new code to the top of the page and in IE you can't see it at all.

file:addquestion.js

 var qcnt = "1";
 function addquestion(){
 qcnt++;
 document.all.cnt.innerHTML = '<input type="hidden" name="count" value="' + qcnt + '">';
var a = document.createElement('tr');
var e = document.createElement('td');
var f = document.createElement('td');
var b = document.createTextNode('Answer'+qcnt+':');
e.appendChild(b);
var c = document.createElement('textarea');
var d = "ans"+qcnt;
c.setAttribute('name',d);
f.appendChild(c);
a.appendChild(e);
a.appendChild(f);
document.getElementById('qs').appendChild(a);
 }

HTML

 <script language="JavaScript" src="addquestion.js"></script>
 <form action="<?=$PHP_SELF?>" method="post" name="form">
<table align="center">
<tr><td>Article Name:</td><td><input type="text" name="title"></td></tr>
<tr><td>Poll Question:</td><td><input type="text" name="question"></td></tr>
<tr><td>Description:</td><td><textarea name="desc"></textarea></td></tr>
 <div id="qs"><tr><td>Answer1:</td><td><textarea name="ans1"></textarea></td></tr></div>
<tr><td> <input type="button" value="Add Answer" onclick="addquestion();"></td><td><input type="submit" name="submit" value="Create!"></td></tr>
<div id="cnt"><input type="hidden" name="count" value="1"></div>
 </form>
</table>

Does anyone see where the error lies?