I am trying to create a dynamic table with each row containing onedate fields. I am using Jquery datepicker. For some reason only the first row is showing in the date picker calendar. Other dynamically created fields are not showing the calendar. I should mention that the first row is by default in place when this page is loaded. Only from the second line it's dynamically created.

Javascript:

```
<script type='text/javascript'>
$(function() {
$( ".datepicker" ).datepicker();
});

$(document).ready(function() {
var currentItem = 1;
$('#addnew').click(function(){
currentItem++;
$('#items').val(currentItem);
var strToAdd = '<tr><td><input type="text" class="datepicker" name="Internal_Deadline'+currentItem+'" id="Internal_Deadline'+currentItem+'" /></td></tr>';
$('#data').append(strToAdd);

});
});

</script>

```

Html:

```
<form name="pipeline" action="" method="post">
<TABLE id="data" class="dd" style="">

<tr><td style="text-align:center;"><b style="font-size: 14px;">Project Plan</b></td><td><input type="button" id="addnew" name="addnew" value="Add a Row" /></td></tr>
<tr><td><input type="text" class="datepicker" name="Internal_Deadline" /></td></tr>
<input type="hidden" id="items" name="items" value="1" /> 
</TABLE>
</form>

```