title: jQuery UI Datepicker Date Range
body: <p>I am using the jQuery UI plugin with the Datepicker function, to set a date range.  The example provided on their page (<a href="http://jqueryui.com/demos/datepicker/date-range.html" rel="nofollow noreferrer">http://jqueryui.com/demos/datepicker/date-range.html</a>) sets the range based on input 'id'; however, I'd like to set the range based on 'class' as my form 'clones' the div to add additional inputs, making the 'id' fields unique on each clone.  When I change the JavaScript to use 'class' instead of 'id', the ranges are no longer functioning.</p>
  
  <p>JavaScript:</p>
  
  <pre><code>&lt;script src="../../scripts/jquery-1.6.4.js"&gt;&lt;/script&gt;
  &lt;script src="../../scripts/jqueryui/ui/jquery.ui.core.js"&gt;&lt;/script&gt;
  &lt;script src="../../scripts/jqueryui/ui/jquery.ui.datepicker.js"&gt;&lt;/script&gt;
  &lt;script&gt;
          $(function() {
              var dates = $( ".start_date, .end_date" ).datepicker({
                  onSelect: function( selectedDate ) {
                      var option = this.class == "start_date" ? "minDate" : "maxDate",
                          instance = $( this ).data( "datepicker" ),
                          date = $.datepicker.parseDate(
                              instance.settings.dateFormat ||
                              $.datepicker._defaults.dateFormat,
                              selectedDate, instance.settings );
                      dates.not( this ).datepicker( "option", option, date );
                  }       
              }); 
          });
  &lt;/script&gt;
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div&gt;
      &lt;label&gt; Start Date:&lt;/label&gt;
      &lt;input type="text" name="start_date1" id="start_date1" class="start_date" /&gt;
  &lt;/div&gt;
  &lt;div&gt;
      &lt;label&gt; End Date:&lt;/label&gt;
      &lt;input type="text" name="end_date1" id="end_date1" class="end_date" /&gt;
  &lt;/div&gt;
  </code></pre>