need help generating dynamic textarea boxes without losing data

I'm trying to create a dynamic textarea box when the user selects "add" on the page. I can generate the box and enter stuff into it but when the user tries to enter another textarea all the content from the previous boxes gets erased.
Can anyone help me? Here is my code
##################################################
var arrInputComments = new Array(0);
var arrInputValueComments = new Array(0);


function addInputComments() {
arrInputComments.push(arrInputComments.length);
arrInputValueComments.push("");
displayComments();
}

function displayComments() {
document.getElementById('comments').innerHTML="";
for (intI=0;intI<arrInputComments.length;intI++) {
document.getElementById('comments').innerHTML+=createInputComments(arrInputComments[intI], arrInputValueComments[intI]);
}
}

function saveValueComments(intId,strValue) {
arrInputValueComments[intId]=strValue;
}

function createInputComments(id,value) {
return "<tr><td><textarea cols='30' id='test "+ id +"' onChange='javascript:saveValueComments("+ id +",this.value)' value='"+ value +"'></textarea></td></tr>";


}

function deleteInputComments() {
if (arrInputComments.length > 0) {
arrInputComments.pop();
arrInputValueComments.pop();
}
displayComments();
}
#############################################
<tr>
<td width="111"><b>Comments</b></td>
<td>
<a href="javascript:addInputComments()">Add</a>
<a href="javascript:deleteInputComments()">Del</a>
</td>
</tr>
<tr>
<td width="111"></td>
<td id="comments">
</tr>

 

Hum, you're doing it the wrong way.

Try this:

//to create a textarea
function createTextArea() {
   return document.createElement('TEXTAREA');
}

//to insert the textarea
function appendTextArea(textArea) {
   document.getElementById('comments').appendChild(textArea);
}

//to access all your text areas inside an array
function getTextAreas() {
   return document.getElementById('comments').getElementsByTagName('TEXTAREA');
}

//to get each textarea value
function getValueFromTextArea(textArea) {
   return textArea.innerHTML; //return textArea.value works to
}

//to delete the last input coment
function removeLastComment() {
   var textAreas = getTextAreas();
   if (textAreas.length > 0) {
      var textAreaToRemove = textAreas[textAreas.length - 1];
      document.getElementById('comments').removeChild(textAreaToRemove);
   }
}

Code (markup):

Your html code can look something like this now: (don't forget to close the <td id="comments"> element)

<tr>
<td width="111"><b>Comments</b></td>
<td>
<a href="javascript:appendTextArea(createTextArea());">Add</a>
<a href="javascript:removeLastComment() ">Del</a>
</td>
</tr>
<tr>
<td width="111"></td>
<td id="comments"></td>
</tr>

Code (markup):

Cheers