Increment ID of selected cloned elements by one
Hi i have following code:
<input type="button" name="addNew" id="addNew" value="Add New Activity" />
<table border="1" class="likertBorder" cellpadding="2" id="actTbl" >
<tr class="likertBorder responseRow" id="actRow">
<td class="likertBorder" valign="middle" align="center">
<select id="SPORT1" name="SPORT1" onchange="display_sports_followup();" onblur="display_sports_followup();">
<option value="">-- Select Activity --</option>
<option value="2020">(push ups, sit ups) vigorous effort</option>
<option value="3015">aerobic, general</option>
<option value="3050">American Indian dancing</option>
</select><br />
<div id="SPORT1_spec_followup">
please specify:<input style="margin-left:5px;" id="SPORT1_spec" type="text" name="SPORT1_spec" maxlength="500" size="50" value=""/>
</div>
</td>
<td class="likertBorder" valign="middle" align="center">
<input style="margin-left:5px;" id="SPORT1D" type="text" name="SPORT1D" maxlength="3" size="3" value="" onkeyup="display_sports_followup();" />
</td>
<td class="likertBorder" valign="middle" align="center">
<input style="margin-left:5px;" id="SPORT1M" type="text" name="SPORT1M" maxlength="3" size="3" value="" onkeyup="display_sports_followup();" />
<span class="responseText">Minutes per Day </span>
</td>
</tr>
</table>
And JQUERY code:
$(document).ready(function() {
$('#addNew').live("click", function()
{
$('#actTbl tbody>tr:last').clone(true).insertAfter('#actTbl tbody>tr:last');
return false;
});
});
Its adding a new row with all child elements but i am unable to assign unique ID's. I'd like increment ID by one or append existing id with some unique number.
Also when i refresh page all loaded elements gets removed. Is there a way so that these newly added rows,Td, text boxes and select stays even when page is refreshed.
Thanks