title: MVC3 - jQuery datepicker when multiple elements have the same ID
body: <p>I have a weird situation (don't we all?) with datepickers and want to get some advice.</p>
  
  <p>I have a screen with a list of Locations, and for each Location, they can click Edit and edit that location.  The Edit  displays below the Edit link, and they can edit multiple locations at one time.  This means the same View is rendered on the screen multiple times, and therefore multiple fields will exist with the same id (editing 4 locations will result in 4 "DateOpened" fields).</p>
  
  <p>So, when I load my View, javascript adds datepickers to any fields that need it like so:</p>
  
  <pre><code>$(document).ready(function () {
      var elements = $(".NeedsDatePicker &gt; td &gt; input");
      $(".NeedsDatePicker &gt; td &gt; input").datepicker();
      $(".NeedsDatePicker").removeClass("NeedsDatePicker");
  });
  </code></pre>
  
  <p>Works fine, but, as you've probably already figured out, when I click a date on the calender, it populates the first "DateOpened" field when multiple Edit windows are open.</p>
  
  <p>Is there a way to tell the datepicker to use the field WITHIN a certain parent, like you can for general jQuery selects?</p>
  
  <pre><code>$("#DateOpened", "Location-134").doWhatever...
  </code></pre>
  
  <p>...or is there a way to give the fields different id's without breaking MVC's UpdateModel() function?  Or any other advice?</p>