title: JQuery .each() with daterangepicker has left ALL my daterangepickers broken
body: <p>In our website, we use <a href="http://www.daterangepicker.com/" rel="nofollow noreferrer">DateRangePicker</a> for any date and datetime fields.
  I applied the following JQuery code to my company's site/testing site:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $(function() {
      $('input[name="other_company_start_date[]"]').each(function() {
          $(this).daterangepicker({
              autoUpdateInput: false,
              drops: 'up',
              singleDatePicker: true,
              showDropdowns: true,
              minYear: 2000,
              maxYear: 2030,
              locale: {
                  cancelLabel: 'Clear'
              }
          });
      });
      $('input[name="other_company_start_date[]"]').each(function() {
          $(this).on('apply.daterangepicker', function(ev, picker) {
              $(this).val(picker.startDate.format('YYYY-MM'));
              var endDate = $(this).parent().parent().parent().closest_descendent('input[name="other_company_end_date[]"]');
              var yearField = $(this).parent().parent().parent().closest_descendent('input[name="other_company_years[]"]');
              if (endDate.val() != '') {
                  var startYear = new Date($(this).val());
                  var endYear = new Date(endDate.val());
                  yearField.val(Math.abs(startYear.getFullYear() - endYear.getFullYear()));
              }
          });
      });
      $('input[name="other_company_start_date[]"]').each(function() {
          $(this).on('cancel.daterangepicker', function(ev, picker) {
              $(this).val('');
          });
      });
  });
  $(function() {
      $('input[name="other_company_end_date[]"]').each(function() {
          $(this).daterangepicker({
              autoUpdateInput: false,
              drops: 'up',
              singleDatePicker: true,
              showDropdowns: true,
              minYear: 2000,
              maxYear: 2030,
              locale: {
                  cancelLabel: 'Clear'
              }
          });
      });
      $('input[name="other_company_end_date[]"]').each(function() {
          $(this).on('apply.daterangepicker', function(ev, picker) {
              $(this).val(picker.startDate.format('YYYY-MM'));
              var startDate = $(this).parent().parent().parent().closest_descendent('input[name="other_company_start_date[]"]');
              var yearField = $(this).parent().parent().parent().closest_descendent('input[name="other_company_years[]"]');
              if (startDate.val() != '') {
                  var startYear = new Date(startDate.val());
                  var endYear = new Date($(this).val());
                  yearField.val(Math.abs(startYear.getFullYear() - endYear.getFullYear()));
              }
          });
      });
      $('input[name="other_company_end_date[]"]').each(function() {
          $(this).on('cancel.daterangepicker', function(ev, picker) {
              $(this).val('');
          });
      });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>The divs/inputs are defined with each entry into the database creating another row of input fields (shown below).</p>
  
  <pre><code>&lt;div style="border-radius: 5px; border-style: ridge; margin-left: 10px; margin-right: 10px;"&gt;
      &lt;h3 style="padding-left: 30px;"&gt;Certifications:&lt;/h3&gt;
      &lt;div id="wrapper_two" style="width: 100%; display: table;"&gt;
      &lt;?php
          $atleastonefield = false;
          foreach($certifications as $certification) {
              $atleastonefield = true;
              $certification = explode(":",$certification);
              echo '&lt;div style="display: table-row;"&gt;';
                  echo '&lt;label style="display: table-cell; padding: 0; padding-left: 5px; text-align: right; width: 170px;"&gt;Certification Name:&lt;/label&gt;';
                  echo '&lt;input class="formatted" style="display: table-cell; padding: 0; text-align: center; height: 40px;" type="text" name="certification_name[]" value="'.(isset($certification[0]) ? $certification[0] : "").'"&gt;';
                  echo '&lt;label style="display: table-cell; padding: 0; padding-left: 5px; text-align: right; width: 150px;"&gt;Certification Number:&lt;/label&gt;';
                  echo '&lt;input class="formatted" style="display: table-cell; padding: 0; text-align: center; height: 40px;" type="text" name="certification_number[]" value="'.(isset($certification[1]) ? $certification[1] : "").'"&gt;';
              echo '&lt;/div&gt;';
              echo '&lt;div style="display: table-row;"&gt;';
                  echo '&lt;label style="display: table-cell; padding: 0; padding-left: 5px; text-align: right; width: 170px;"&gt;Company Acquired From:&lt;/label&gt;';
                  echo '&lt;input class="formatted" style="display: table-cell; padding: 0; text-align: center; height: 40px;" type="text" name="certification_company[]" value="'.(isset($certification[2]) ? $certification[2] : "").'"&gt;';
                  echo '&lt;label style="display: table-cell; padding: 0; padding-left: 5px; text-align: right; width: 150px;"&gt;Date Obtained:&lt;/label&gt;';
                  echo '&lt;input class="formatted" style="display: table-cell; padding: 0; text-align: center; height: 40px;" type="text" name="certification_obtained[]" value="'.(isset($certification[3]) ? $certification[3] : "").'"&gt;';
                  echo '&lt;label style="display: table-cell; padding: 0; padding-left: 5px; text-align: right; width: 60px;"&gt;Expiration:&lt;/label&gt;';
                  echo '&lt;input class="formatted" style="display: table-cell; padding: 0; text-align: center; height: 40px;" type="text" name="certification_expiration[]" value="'.(isset($certification[4]) ? $certification[4] : "").'"&gt;';
              echo '&lt;/div&gt;';
          }
      ?&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The problem is that on page load, if a box that uses a DateRangePicker is not empty, than the DateRangePicker shows up with NaN as the day options with the month of January and the year of 'minYear'. If the box wasn't empty, it shows the DateRangePicker correctly <em>even after clicking or manually inputting a date.</em></p>
  
  <p>If you noticed the JQuery code is for the "other companies/work experience" fields but the html/php code posted is from the "certifications" fields. The reason for this is the JQuery code is effecting every instance of a DateRangePicker in the 2000-ish lines of code on this page. Last bit of information, the <em>closest_descendent</em> is from the accepted answer in <a href="https://stackoverflow.com/questions/8961770/similar-to-jquery-closest-but-traversing-descendants">this</a> stack overflow question; however, I doubt that it's related. Really stumped here. Pictures below:</p>
  
  <p><a href="https://i.stack.imgur.com/SP24A.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SP24A.jpg" alt="input boxes"></a>
  <a href="https://i.stack.imgur.com/r1lYk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/r1lYk.png" alt="broken DateRangePicker"></a>
  <a href="https://i.stack.imgur.com/KPEqT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KPEqT.png" alt="working DateRangePicker"></a></p>
  
  <p>EDIT: Additionally, removing the offending code does <strong>not</strong> fix the issue.</p>
  
  <p>EDIT:</p>
  
  <pre><code>&lt;div style="border-radius: 5px; border-style: ridge; margin-left: 10px; margin-right: 10px;"&gt;
      &lt;h3 style="padding-left: 30px;"&gt;Other Companies You've Worked:&lt;/h3&gt;
      &lt;div id="wrapper_three" style="width: 100%; display: table;"&gt;
      &lt;?php
          $atleastonefield = false;
          $i = 0;
          foreach($other_companies_worked as $other_company_worked) {
              $atleastonefield = true;
              $other_company_worked = explode(":",$other_company_worked);
              echo '&lt;div style="display: table-row;"&gt;';
                  echo '&lt;label style="display: table-cell; padding: 0; padding-left: 5px; text-align: right; width: 230px;"&gt;Company Name (Related Jobs):&lt;/label&gt;';
                  echo '&lt;div class="autocomplete companies" style="min-width: 200px; max-width: 300px; display: table-cell; padding: 0; height: 40px;"&gt;';
                      echo '&lt;input id="input_'.$i.'" class="formatted" type="text" name="other_company_name[]" value="'.(isset($other_company_worked[0]) ? $other_company_worked[0] : "" ).'" style="text-align: center;"&gt;';
                      $i++;
                  echo '&lt;/div&gt;';
                  echo '&lt;label style="display: table-cell; padding: 0; text-align: right; width: 100px;"&gt;Position Held:&lt;/label&gt;';
                  echo '&lt;div class="autocomplete positions" style="min-width: 200px; max-width: 300px; display: table-cell; padding: 0; height: 40px;"&gt;';
                      echo '&lt;input id="input_'.$i.'" class="formatted" type="text" name="other_company_position[]" value="'.(isset($other_company_worked[2]) ? $other_company_worked[2] : "" ).'" style="text-align: center;"&gt;';
                      $i++;
                  echo '&lt;/div&gt;';
                  echo '&lt;label style="display: table-cell; padding: 0; text-align: right; width: 100px;"&gt;Years Worked:&lt;/label&gt;';
                  echo '&lt;div class="autocomplete years" style="width: 40px; display: table-cell; padding: 0; height: 40px;"&gt;';
                      echo '&lt;input id="input_'.$i.'" class="formatted" type="text" name="other_company_years[]" value="'.(isset($other_company_worked[1]) ? $other_company_worked[1] : "" ).'" style="text-align: center;"&gt;';
                      $i++;
                  echo '&lt;/div&gt;';
              echo '&lt;/div&gt;';
              echo '&lt;div style="display: table-row;"&gt;';
                  echo '&lt;label style="display: table-cell; padding: 0; padding-left: 5px; text-align: right; width: 230px;"&gt;Start Date:&lt;/label&gt;';
                  echo '&lt;div style="min-width: 200px; max-width: 300px; display: table-cell; padding: 0; height: 40px;"&gt;';
                      echo '&lt;input id="input_'.$i.'" class="formatted" type="text" name="other_company_start_date[]" value="'.(isset($other_company_worked[3]) ? $other_company_worked[3] : "" ).'" style="text-align: center;"&gt;';
                      $i++;
                  echo '&lt;/div&gt;';
                  echo '&lt;label style="display: table-cell; padding: 0; text-align: right; width: 100px;"&gt;End Date:&lt;/label&gt;';
                  echo '&lt;div style="min-width: 200px; max-width: 300px; display: table-cell; padding: 0; height: 40px;"&gt;';
                      echo '&lt;input id="input_'.$i.'" class="formatted" type="text" name="other_company_end_date[]" value="'.(isset($other_company_worked[4]) ? $other_company_worked[4] : "" ).'" style="text-align: center;"&gt;';
                      $i++;
                  echo '&lt;/div&gt;';
              echo '&lt;/div&gt;';
          }
      ?&gt;
  &lt;/div&gt;
  </code></pre>