Как добавить созданный идентификатор к datepicker() с каждым нажатием кнопки

Question

Я хочу создать строку из нескольких входов с уникальным идентификатором, который они создаются с каждым щелчком мыши, чтобы добавить еще один рейс. Как показано ниже в destina.us , и он был удален при нажатии на значок icon.how. Я могу добавить созданный id кодам, связанным с JQuery UI datepicker, до тех пор, пока календарь входов не будет работать правильно?

      <div id="multiple"> 
      <div class="calendar-container"> 
       <div class="form-group col-sm-4 location-icon"> 
       <input type="text" class="form-control" placeholder="origin" /> 
      </div> 
      <div class="form-group col-sm-4 location-icon destination-city"> 
      <input type="text" class="form-control " placeholder="destination" /> 
      </div> 
      <div class="form-group col-sm-4 calendar"> 
      <input type="text" class="form-control" placeholder="start day" id="date_start_multiple" /> 
     </div> 
      </div> 
      <div class="calendar-container"> 
     <div class="form-group col-sm-4 location-icon"> 
      <input type="text" class="form-control" placeholder="origin" /> 
     </div> 
     <div class="form-group col-sm-4 location-icon destination-city"> 
      <input type="text" class="form-control " placeholder="Destination" /> 
     </div> 
     <div class="form-group col-sm-4 calendar"> 
      <input type="text" class="form-control" placeholder="start Day" id="date_start2_multiple" /> 
     </div> 
    </div> 

    <div class="row"> 
     <span class="add-flight colorOrange add-anther-flight"><i class="fa fa-plus ml5"></i><span>add another flight</span></span>  
    </div> 

       $(document).ready(function() { 
        $('.add-anther-flight').click(function() { 
        addFlight(); 
        }); 
     var i = 1; 
     function addFlight() { 
      $('#multiple').append(
       "<div class='flight'>" + 
      "<div class='calendar-container'>" + 
       "<div class='form-group col-sm-4 location-icon'>" + 
        "<input type='text' class='form-control' placeholder='origin' />" + 
       "</div>" + 
       "<div class='form-group col-sm-4 location-icon destination-city'>" + 
        "<input type='text' class='form-control' placeholder='destination' />" + 
       "</div>" + 
       "<div class='form-group col-sm-4 calendar calendar2'>" + 
        '<input type="text" class="form-control persianNumber" placeholder="start day" id="date_start_multiple-' + i + '"/>' + 
       "</div>" + 
       "</div>" + 
     "</div>"); 
      i++; 
     } 

      $("date_start_multiple,date_start2_multiple").datepicker({ 
       dateFormat: "yy-mm-dd", 
       minDate: 0, 
       onSelect: function (date) { 
        var date2 = $('#date_start').datepicker('getDate'); 
        date2.setDate(date2.getDate() + 1); 
        $('#date_finish').datepicker('setDate', date2); 
        //sets minDate to dt1 date + 1 
        $('#date_finish').datepicker('option', 'minDate',date2); 
       } 

     }); 
    }); 

http://destinia.us/#_ga=1.109031490.1172383090.1484504028

Answer 1

Существует некоторое обновление кода на JSFiddle

Итак, прежде всего я добавить функцию, где вы посылаете блок контейнер с DatePicker и кнопка для удаления этого блока :

function initializeClicks($element) { 
     $element.find(".datepicker").datepicker({ 
      dateFormat: "yy-mm-dd", 
      minDate: 0, 
      onSelect: function(date) { 
       var date2 = $('#date_start').datepicker('getDate'); 
       date2.setDate(date2.getDate() + 1); 
       $('#date_finish').datepicker('setDate', date2); 
       //sets minDate to dt1 date + 1 
       $('#date_finish').datepicker('option', 'minDate', date2); 
      } 
     }); 

     $element.find(".remove-block").click(function() { 
      $(this).parent().remove(); 
     }); 
    } 

Как вы можете видеть, я добавлен класс на каждый сборщик даты inpu t для легкой инициализации. Кроме того, для генерации идентификатора для DatePicker, вы можете просто использовать несколько блоков и увеличивать их на одну

var index = $(".block").length + 1; 

Я надеюсь, что это помогло вам.