title: How can we get each `data-id` when I click on `dateFrom` and `dateTo` datepicker?
body: <p>How can we get each <code>data-id</code> when I click on <code>dateFrom</code> and <code>dateTo</code> datepicker (jQuery ui datepicker). </p>
  
  <p>I have to pass each <code>data-id</code> to server when I click on <code>dateFrom</code> and <code>dateTo</code> datepicker.</p>
  
  <p>Currently I am getting only first value data-id="5799f281049ac12422000033"</p>
  
  <p><strong>Html</strong></p>
  
  <pre><code>&lt;div class="form-group row calendar" data-id="5799f281049ac12422000033"&gt;
           &lt;div class="col-sm-4"&gt;
               &lt;input type="text" class="form-control dateFrom hasDatepicker" id="dateFrom" name="dateFrom" placeholder="Arrival" readonly=""&gt;
           &lt;/div&gt;
           &lt;div class="col-sm-4"&gt;
               &lt;input type="text" class="form-control dateTo hasDatepicker" id="dateTo" name="dateTo" placeholder="Departure" readonly=""&gt;
           &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;div class="form-group row calendar" data-id="5799f281049ac12422000034"&gt;
           &lt;div class="col-sm-4"&gt;
               &lt;input type="text" class="form-control dateFrom hasDatepicker" id="dateFrom" name="dateFrom" placeholder="Arrival" readonly=""&gt;
           &lt;/div&gt;
           &lt;div class="col-sm-4"&gt;
               &lt;input type="text" class="form-control dateTo hasDatepicker" id="dateTo" name="dateTo" placeholder="Departure" readonly=""&gt;
           &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;div class="form-group row calendar" data-id="5799f281049ac12422000035"&gt;
           &lt;div class="col-sm-4"&gt;
               &lt;input type="text" class="form-control dateFrom hasDatepicker" id="dateFrom" name="dateFrom" placeholder="Arrival" readonly=""&gt;
           &lt;/div&gt;
           &lt;div class="col-sm-4"&gt;
               &lt;input type="text" class="form-control dateTo hasDatepicker" id="dateTo" name="dateTo" placeholder="Departure" readonly=""&gt;
           &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p><strong>Script</strong></p>
  
  <pre><code>$(function() {
              var data_id = $('.calendar').data("id");
              $('#dateFrom').datepicker({
              dateFormat: "dd.mm.y",
              onChangeMonthYear: function(year,month,inst) {
  
                  $.ajax({
                      url: '/availability,
                      dataType: 'JSON',
                      type: 'POST',
                      async: false,
                      data: { dateFrom: start_date, data_id : data_id  },
                      success: function (response) {
                          array = response.disableDates;
                      }
                  });
              } 
              });
  
              $( ".dateTo" ).datepicker({ datepicker({
              dateFormat: "dd.mm.y",
              onChangeMonthYear: function(year,month,inst) {
  
                  $.ajax({
                      url: '/availability,
                      dataType: 'JSON',
                      type: 'POST',
                      async: false,
                      data: { dateFrom: start_date, data_id : data_id  },
                      success: function (response) {
                          array = response.disableDates;
                      }
                  });
              }
  
              });
          });
  </code></pre>