title: JQuery Datepicker for multiple .NET MVC Input Fields not working
body: <p>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.</p>
  
  <pre><code>&lt;% foreach (var item in Model) { %&gt;
  
  &lt;tr&gt;
  &lt;td&gt;&lt;%: item.ID %&gt;&lt;/td&gt;
  &lt;td&gt;&lt;%: Html.TextBox("usernames", null, new { @class = "datepicker" }) %&gt;&lt;/td&gt;
  &lt;td&gt;&lt;%: item.Password %&gt;&lt;/td&gt;
  &lt;td&gt; &lt;%: item.Race %&gt;&lt;/td&gt;
  &lt;/tr&gt;
  
  &lt;% } %&gt;
  </code></pre>
  
  <p>Because I have several rows this produces several  fields all with the class "datepicker". I am applying the following JQuery for the datepicker:</p>
  
  <pre><code>$(document).ready(function () {
  $('input').filter('.datepicker').datepicker({
  dateFormat: "dd/mm/yy",
  onSelect: function (value, date) {
  alert(this.value);
  }
  });
  });
  </code></pre>
  
  <p>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:</p>
  
  <pre><code>&lt;tr&gt;
  &lt;td&gt;6&lt;/td&gt;
  &lt;td&gt;&lt;input class="datepicker" id="usernames" name="usernames" type="text" value="" /&gt;&lt;/td&gt;
  &lt;td&gt;dinosaur&lt;/td&gt;
  &lt;td&gt; 1&lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>Interstingly, if I simply create 4  of class "datepicker" everything is fine. Its the way the html helpers create the  for you.</p>
  
  <p>Please Help!</p>