title: Selecting same element using class in JQuery
body: <p>I have lot of date fields in my application. IDs can't help, I want to format date fields using class. While trying to format the date, Holder2 date is also changed to Holder1's date, PFB </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function(){
    $('.date').val($.format.date($('.date').val(), "MM/dd/yyyy hh:mm a"));
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-dateFormat/1.0/jquery.dateFormat.min.js"&gt;&lt;/script&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Test&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div&gt;
      Holder 1:&lt;input class="date" type="text" value="Mon Feb 06 00:30:00 IST 2017"&gt;&lt;br&gt;
      Holder 2:&lt;input class="date" type="text" value="Sun Mar 12 11:06:00 IST 2017"&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>Current Output:</strong> 
  Holder 1: 02/06/2017 12:30 AM
  Holder 2: 02/06/2017 12:30 AM</p>
  
  <p><strong>Expected Output:</strong>
  Holder 1: 02/06/2017 12:30 AM
  Holder 2: 03/12/2017 11:06 AM</p>
  
  <p><strong>PS:</strong> type is mentioned as text because if mentioned as date, chrome shows its own datepicker. Both my custom datepicker and chrome's are loaded at the same time. Help me out please. Thanks.</p>