Problem dynamically creating multiple rows in <table>

Hello there Javascript script experts, I am creating a simple form where the user can click a button called “Add member” and a new div is created. The problem I am having is I can’t figure out how to fetch the counter value and print it to the left of every row. On top of that, I would like each input’s name to have the number of it’s row in it (so the name field in row 5 would be called something like name_5). Is this possible? I am still a noob so if you could demonstrate what you mean I would greatly appreciate it.

Thank you in advance for any help! Here is my code ?

[CODE]<script type=”text/javascript”>
var counter = 1;
function createDiv()
{
counter++;
var divTag = document.createElement(“div”);
var value = document.getElementById(“add_member”).innerHTML;
divTag.id = counter;
divTag.innerHTML = value;
document.getElementById(‘div_container’).appendChild(divTag);
}
function showCounter()
{
return counter;
}

function update(var id)
{
document.getElementsByTagName(id).value=counter;
}
</script>

<div style=”clear:both;padding:10px 5px;background-color:#EEE;border-top:2px solid #333;color:#333;font-size:12px;height:12px;”>
<div style=”float:left”><b>Bands</b> – <?=$page_title?></div>
<div style=”float:right”><b>Create</b> your band!</div>
</div>

<div style=”padding:10px 5px 5px 5px;”>

<form action=”<?=base_url()?>bands/create” method=”post”><table cellspacing=”5px”>
<tr>
<td>Band Name</td>
<td><input type=”text” name=”band_name” /></td>
</tr>
<tr>
<td>Description</td>
<td><textarea name=”band_desc” style=”width:300px;height:1a00px;”></textarea></td>
</tr>
<tr>
<td style=”vertical-align:top”>Members</td>
<td>
<input type=”button” value=”Add Member” onClick=”createDiv();” /><input type=”button” onClick=”showCounter()” value=”Show Counter” />
<div id=”div_container” style=”padding:5px”><div id=”add_member” style=””>
<table style=”margin:5px;” cellspacing=”5px”>

<tr>
<td style=”font-size:16px;text-align:center;border:1px solid #FF3300;background-color:#EEE;width:25px;”>
<input type=”hidden” name=”row_number_” value=”this.value = showCounter()” />
Row Number
</td>
<td colspan=”2″ style=”border:1px solid #CCC;background-color:#EEE;”>
<table>
<tr>
<td>Name<td><td><input value=”<script></script>” type=”input” name=”name”/></td><td><select>
<option>– Select a Status –</option>
<option>Founder</option>
<option>Manager</option>
<option>Officer</option>
<option>Member</option>
<option>Groupie</option>
<option>Fan</option>
</select></td>
</tr>

<tr>
<td>Instrument<td><td><input type=”text” name=”instrument” /></td><td></td>
</tr>
</table>
</td>
<td style=”border:1px solid #CCC;background-color:#EEE;width:200px;”><textarea style=”width:194px;font-family:Arial, Helvetica, sans-serif;font-size:9px;margin:3px;padding:2px;” onFocus=”this.value = ””>Short biography…</textarea></td>
</table>
</div></div>
</td>
</tr>
<tr>
<td></td>
<td><input type=”hidden” name=”values” value=”showCounter()” /><input type=”submit” name=”submit” value=”Create Band”/></td>
</tr>
</table></form>

</div>[/CODE]

Pianoman993

Also in #JavaScript _↴