title: Jquery Datepicker in multiple fields and saving the inputs
body: <p>I'm still learning and my newest project got me stuck on this:</p>
  
  <p>Inside of a table to manage customers, I want to have an input field with a datepicker (<a href="https://longbill.github.io/jquery-date-range-picker/" rel="nofollow noreferrer">https://longbill.github.io/jquery-date-range-picker/</a> using this) for every row, like this:</p>
  
  <pre><code>&lt;td&gt;
  //some more content
      &lt;div class="includeDatepicker"&gt;
          &lt;input type="text" class="datepicker"&gt;
      &lt;/div&gt;
  &lt;/td&gt;
  </code></pre>
  
  <p>the whole thing gets set up like this:</p>
  
  <pre><code>jQuery("document").ready(function () {
      jQuery('.datepicker').dateRangePicker({
      autoClose: true,
      singleDate : true,
      showShortcuts: false,
      singleMonth: true,
      startOfWeek: 'monday',
      separator : ' ~ ',
      format: 'DD.MM.YYYY HH:mm',
      time: {
          enabled: true
      }
  });
  });
  </code></pre>
  
  <p>Until here, it works fine. Then though:</p>
  
  <ol>
  <li><p>The datepicker only appears for the first input field in the first row of the table and will appear only there even if the others are clicked. What can I do to add a datepicker to every input field? I'm already using a class selector. I have done my research on this and found some solutions, but I can't really wrap my head around it either way. </p></li>
  <li><p>How would it be possible that the date written to the input fields is saved even when the page is refreshed? </p></li>
  </ol>
  
  <p>I would greatly appreciate any help and I've done research before asking on here, but none of it was to great avail.</p>
  
  <p>Greetings</p>