Add Row(field) inserts in wrong spot

[swahabio]

I am trying to figure out how to save a newly created row on my asp page. I have created a function that will add rows to my asp page but now I need to know how to save each of those rows.

[swahabio]

On my asp page I created a function that would add new combo boxes. I want to be able to save the values in the combo boxes to the page record. So when I open the page record again, the box or boxes will have the saved values.

[swahabio]

I am creating a web application that contains a section where if a user clicks the plus button it will add a new row to the table on the asp page. I want to be able to save that new row to the associated record. So when I reload the record, the correct number of rows appear on the asp page. So, if I add 4 new rows to the section on the asp page and save them, I want to be able to reload the page and see those 4 new rows.

I hope I'm not getting annoying by not being able to specify exactly what I'm needing. I do appreciate your help.

[swahabio]

Here is my function to add clone a field:

oHTML = oHTML & "<script language='javascript'>" & vbCrLf

oHTML = oHTML & "var counter = 0;" & vbCrLf
oHTML = oHTML & "function moreFields()" & vbCrLf
oHTML = oHTML & "{" & vbCrLf
oHTML = oHTML & "counter++;" & vbCrLf
oHTML = oHTML & "var newFields = document.getElementById('readroot').cloneNode(true);" & vbCrLf
oHTML = oHTML & "newFields.id = '';" & vbCrLf
oHTML = oHTML & "newFields.style.display = 'block';" & vbCrLf
oHTML = oHTML & "var newField = newFields.childNodes;" & vbCrLf
oHTML = oHTML & "for (var i=0;i<newField.length;i++)" & vbCrLf
oHTML = oHTML & "{"
oHTML = oHTML & "var theName = newField[i].name" & vbCrLf
oHTML = oHTML & "if (theName)" & vbCrLf
oHTML = oHTML & "newField[i].name = theName + counter;" & vbCrLf
oHTML = oHTML & "}"
oHTML = oHTML & "var insertHere = document.getElementById('writeroot');" & vbCrLf
oHTML = oHTML & "insertHere.parentNode.insertBefore(newFields,insertHere);" & vbCrLf
oHTML = oHTML & "window.onload = moreFields;" & vbCrLf
oHTML = oHTML & "}"

oHTML = oHTML & "</script>"

Here is my issue. This function is placed in n number of tables depending on a recordset. So if the recordset returns 3 tables then each function will be applied to those 3 tables. When I click on the button in the table n, the field always appends to table 1. I would like the field to append to table x.

[swahabio]

I have gotten some help but I still cant figure out how to get a new field inserted into the correct spot. I have 2 tables in which you can add a field to by clicking the add more fields button. But for some reason, no matter which "add more fields" button I hit, the new field appends to table1. Here is my code straight from my ASP page. So if anyone wants to replicate it just copy paste it to an asp page and then run it.

<script language="javascript">

var counter = 0;
function moreFields()
{
counter++;
var newFields = document.getElementById('readroot').cloneNode(true);
newFields.id = '';
newFields.style.display = 'block';
var newField = newFields.childNodes;
for (var i=0;i<newField.length;i++)
{
var theName = newField[i].name
if (theName)
newField[i].name = theName + counter;
}
var insertHere = document.getElementById('writeroot');
insertHere.parentNode.insertBefore(newFields,insertHere);
//insertHere;
window.onload = moreFields;
}
</script>
<form name="FirstPageSubmit" action="secondpage.asp" method="post">
<table name=table1>
<input type="button" value="Give me more fields!" onClick="moreFields()" id=button4 name=button4>
<!--<tr ID="readroot" style="display: none">-->
<p class="hr"> </p>
<!--<input type="button" value="Remove review" style="font-size: 10px"
onClick="
this.parentNode.parentNode.removeChild(this.parentNode);
" id=button1 name=button1><br><br>-->

<div name='div1' id="readroot" style="display: none">

<select name="rankingsel_1">
<option>Rating</option>
<option value="excellent">Excellent</option>
<option value="good">Good</option>
<option value="ok">OK</option>
<option value="poor">Poor</option>
<option value="bad">Bad</option>
</select><br><br>

<input type="button" value="Remove review" style="font-size: 10px"
onClick="
this.parentNode.parentNode.removeChild(this.parentNode);
" id=button1 name=button1>
</div>
<span id="writeroot"></span>
</table>
<!--<span id="writeroot"></span>-->
<!--<input type="button" value="Give me more fields!" onClick="moreFields()">-->

<!--<input type="submit" value="Send form" >-->



<table name=table2>
<input type="button" value="Give me more fields!" onClick="moreFields()" id=button4 name=button4>
<!--<tr ID="readroot" style="display: none">-->
<p class="hr"> </p>
<!--<input type="button" value="Remove review" style="font-size: 10px"
onClick="
this.parentNode.parentNode.removeChild(this.parentNode);
" id=button1 name=button1><br><br>-->

<div name='div2' id="readroot" style="display: none">

<select name="rankingsel_2">
<option>Rating</option>
<option value="excellent">Excellent</option>
<option value="good">Good</option>
<option value="ok">OK</option>
<option value="poor">Poor</option>
<option value="bad">Bad</option>
</select><br><br>

<input type="button" value="Remove review" style="font-size: 10px"
onClick="
this.parentNode.parentNode.removeChild(this.parentNode);
" id=button1 name=button1>
<!--</select><br><br>-->
<!--</div>-->
</div>
<span id="writeroot"></span>
</table>
<!--<input type="button" value="Give me more fields!" onClick="moreFields()" id=button2 name=button2>-->

<input type="submit" value="Send form" id=submit1 name=submit1>


</form>