JSFiddle - React, Tailwind, and code Playground
HTML
<table width="100%" border="0" align="center" cellpadding="10" cellspacing="0" class="contentblock">
<tr>
<td width="140">
<strong>1</strong></td>
<td>
<input type="text" id="datepicker" class="calendar_inputnew">
</td>
<td width="145">
<input type="Button" value="Add Row" class="AddRow" id="test" />
</td>
</tr>
</table>
<input type="hidden" value="0" id="counter">
JavaScript
setdatepicker();
$("input[type='button'].AddRow").live('click',
function() {
var index = $(this).closest('tr').index();
if (index > 0) {
$(this).closest('tr').remove();
} else {
var $tr = $(this).closest('tr').clone(true);
var $input = $tr.find('input.startdatum');
var index = $('input#counter').val();
$('#test').val('Delete');
var id = 'datepicker' + index;
index++;
$('input#counter').val(index);
$input.attr('id', id).data('index', index);
console.log(index);
$tr.prependTo($(this).closest('table'));
setdatepicker();
}
var renum = 1;
$("tr td strong").each(function() {
$(this).text(renum);
renum++;
});
});
function setdatepicker(){
$('.startdatum').each(function() {
$(this).datepicker('destroy');
$(this).datepicker({
dateFormat: 'mm-dd-yy'
});
});
}
$(function() {
$( "#datepicker" ).datepicker({
showOn: "button",
buttonImage: "http://www.nyp.edu.sg/nyp/slot/u100/current%20students/calendar_icon.jpg",
buttonImageOnly: true,
showOtherMonths: true,
selectOtherMonths: true
});
});