ボタンをクリックするたびにdatepicker（）に作成されたIDを追加する方法

Question

クリックごとに作成される一意のIDを持つ行を作成して、別のflight.likeの下の画像をdestina.usに追加したい。 これは、remove on icon.hをクリックすると削除されました。入力のカレンダーが正しく機能するまで、作成した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

上のコードのいくつかの更新がありますが、私はすべての最初のあなたは日付ピッカーとボタンでブロックコンテナを送るところ、そのブロックを削除する機能を追加：

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簡単に初期化できます。 また、日付ピッカーのためのIDを生成するための、あなただけのブロックの数を使用し、1

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

私は、これはあなたを助けたことを願ってのためにそれらをインクリメントすることができます。