asp.net mvc - JQuery Datepicker for multiple .NET MVC Input Fields not working

Question

I have simplified my work for this question but the same problem remains. I am using the Textbox HTML helper to display empty textboxes as I loop through the items in this model.

<% foreach (var item in Model) { %>

<tr>
<td><%: item.ID %></td>
<td><%: Html.TextBox("usernames", null, new { @class = "datepicker" }) %></td>
<td><%: item.Password %></td>
<td> <%: item.Race %></td>
</tr>

<% } %>

Because I have several rows this produces several fields all with the class "datepicker". I am applying the following JQuery for the datepicker:

$(document).ready(function () {
$('input').filter('.datepicker').datepicker({
dateFormat: "dd/mm/yy",
onSelect: function (value, date) {
alert(this.value);
}
});
});

When the page renders, every textbox creates a calendar as expected but it always puts the date into the textbox on line one. I need the date to go into the textbox the calendar appeared next to. The html for the code above looks fine:

<tr>
<td>6</td>
<td><input class="datepicker" id="usernames" name="usernames" type="text" value="" /></td>
<td>dinosaur</td>
<td> 1</td>
</tr>

Interstingly, if I simply create 4 of class "datepicker" everything is fine. Its the way the html helpers create the for you.

Please Help!

Answer 1

The answer is to give the textboxes being generated unique id's like below otherwise it will not work.

<% foreach (var item in Model) { %>

<tr>
<td><%: item.ID %></td>
<td><%: Html.TextBox("usernames", null, new { ID=item.ID @class = "datepicker" }) %></td>
<td><%: item.Password %></td>
<td> <%: item.Race %></td>
</tr>

<% } %>