jquery datepicker not working for dynamic rows - jquery-ui

Question

I looked at many solutions, but this did not help.
I am a newbie to JQuery.
I want to bind a date picker to the newly added row in a table.
The script file is as follows.
$('a.add-passenger').click(function(event){
event.preventDefault();
counter++;
var newRow =
'<tr>' +
'<td><input type="text" name="Name' + counter + '"/></td>' +
'<td><input type="text" name="DOB' + counter + '"/></td>' +
'<td><input type="text" name="PassNum' + counter + '"/></td>' +
'<td><input type="text" name="PassExpiry' + counter + '"/></td>' +
'<td><input type="text" name="Destination' + counter + '"/></td>' +
'<td><input type="text" name="DepDate' + counter + '"/></td>' +
'<td><input type="text" name="ArrDate' + counter + '"/></td>' +
'<td><a class="remove">remove</a></td>'
'</tr>';
$table.append(newRow);
$( "DOB" ).datepicker( "destroy" );
$("#DOB").datepicker({
changeMonth: true,
changeYear: true
});
$("#ArrDate").datepicker({
minDate: 0,
maxDate:"+60D",
numberOfMonths: 2,
onSelect: function(selected) {
$("#DepDate").datepicker("option","maxDate", selected)
}
});
$("#DepDate").datepicker({
minDate: 0,
maxDate: "+60D",
numberOfMonths: 2,
onSelect: function(selected) {
$("#ArrDate").datepicker("option","minDate", selected)
}
});
});
However, when the row is added, only the first row has the date pickers and not the other rows.
There are different date pickers and hence I cannot use a class for date pickers.