title: Multiple jquery Datepicker with start end validation
body: <p>Hi I would appreciate any assistance with regards to my problem</p>
  
  <p>I am able to make the jQuery Datepicker work with the start/end date validation if I only have 1 datepicker for both start and end.</p>
  
  <p>However, I don't know how to have the same function if I have multiple datepickers in the same page. I can't classify them in a class cause then they aren't able to validate according to the correct start and end datepickers. </p>
  
  <p>I've searched everywhere but still unable to find a solution. Hope someone can help me with this! 
  Thank you </p>
  
  <p>This is my javascript:</p>
  
  <pre><code>$(document).ready(function () {
      $("#start1").datepicker({
      numberOfMonths: 2,
      onSelect: function(selected) {
        $("#end1").datepicker("option","minDate", selected)
      }
  });
      $("#end1").datepicker({ 
      numberOfMonths: 2,
      onSelect: function(selected) {
         $("#start1").datepicker("option","maxDate", selected)
      }
  });  
  });
  </code></pre>
  
  <p>This is my html for 1 datepicker each:</p>
  
  <pre><code>&lt;input type="text" name="start1" placeholder="Start Date" id="start1" class="form-control" /&gt;'
  &lt;input type="text" name="end1"  placeholder="End Date" id="end1" class="form-control" /&gt;
  </code></pre>
  
  <p>If there are more than 1 datepicker the code is as such: </p>
  
  <pre><code>&lt;input type="text" name="start" placeholder="Start Date" id="start&lt;%=i%&gt;" class="form-control" /&gt;
  &lt;input type="text" name="end"  placeholder="End Date" id="end&lt;%=i%&gt;" class="form-control" /&gt;
  </code></pre>
  
  <p>where i represents a number depending on the size of an array</p>