Multiple datepicker with same classes in table - jquery-ui-datepicker

Question

I need to make 2 or more table rows with datepicker inputs. They all have the same class names. When I select 'Start Date' the end date must NOT be greater than Start Date. If there is only one row the example works but for multiple rows with same classes it does not work. Please help.
HTML:
<table class="list">
<thead>
<tr>
<td>Title</td>
<td>Start Date</td>
<td>End Date</td>
<td></td>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" value="new 1" size="2"></td>
<td><input type="text" class="startdate" ></td>
<td><input type="text" class="enddate" ></td>
</tr>
<tr>
<td><input type="text" value="new 2" size="2"></td>
<td><input type="text" class="startdate"></td>
<td><input type="text" class="enddate"></td>
</tr>
</tbody>
JS:
$( ".startdate").datepicker({
dateFormat:'dd/mm/yy',
minDate: new Date(),
onSelect: function(dateStr) {
$('.enddate').datepicker('option', 'defaultDate', dateStr);
$('.enddate').datepicker('option', 'minDate', dateStr);
}
});
$( ".enddate" ).datepicker({
dateFormat:'dd/mm/yy',
minDate: new Date()
});
Here is JSFiddle example.

Answer 1

Since you have used class for endDate, it is affected all the elements with the same class.
Instead using the below approach you can make it to represent the endDate that particular row; therefore it won't affect the other endDate s in the table.
$(".startdate").datepicker({
dateFormat: 'dd/mm/yy',
minDate: new Date(),
onSelect: function (dateStr, ops) {
var endDate = $(this).parents('tr').find('.enddate');
$(endDate).datepicker('option', 'defaultDate', dateStr);
$(endDate).datepicker('option', 'minDate', dateStr);
}
});
JSFiddle
Here when you select the date from startDate, the below will get the endDate element of that particular tr.
var endDate = $(this).parents('tr').find('.enddate');
Thereby set the minDate for the above variable and your problem will be solved.