Как отключить даты окончания выбора даты, которые меньше или равны дате начала для динамических полей

Question

Здесь только для значений по умолчанию отключены даты окончания, меньшие, чем даты начала. Как это сделать для динамических полей?

var constants = {
  MAX_YEAR: "2020"
};

var datePickerOptions = {
  maxDate: constants.MAX_YEAR + '-12-31',
  changeYear: true,
  changeMonth: true,
  dateFormat: 'yy-mm-dd',
  onSelect: function(selected) {
    $("#enddate").datepicker("option", "minDate", selected)
  }
};

$(document).ready(function() {
  $('.datepicker').datepicker(datePickerOptions);

  $('#container').on('click', '.remove', function() {
    $(this).parent().remove();
  });

  $('#add').on('click', function() {
    var row = $('div.addNew:first').clone();
    $('#container').append(row);
    var pickers = row.find(".datepicker");
    pickers.removeAttr("id");
    pickers.removeClass("hasDatepicker");
    pickers.datepicker(datePickerOptions);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
<div id="container">
  <div class="addNew" ?>
    Start Date :
    <input name='settings[start_date][]' , value="2018-06-25" class="datepicker year-date-month-calendar input-small removetradingdates-block" id="startdate" /> End Date :
    <input name='settings[end_date][]' , value="2018-06-25" class="datepicker year-date-month-calendar input-small removetradingdates-block" id="enddate" />
    <input type="button" class="remove" value="Remove" />
  </div>
  <input type="button" id="add" value="Add Periods" />
</div>

Answer 1

    <div id="container">
      <div class="addNew" ?>
        Start Date :
        <input name='settings[start_date][]', value="2018-06-25"
        class="datepicker year-date-month-calendar input-small removetradingdates-block startdate" />
        End Date :
        <input name='settings[end_date][]', value="2018-06-25"
        class="datepicker year-date-month-calendar input-small removetradingdates-block enddate" />
        <input type="button" class="remove" value="Remove" />
      </div>
      <input type="button" id="add" value="Add Periods" />
    </div>

    var constants = {
      MAX_YEAR: "2020"
    };

    var datePickerOptions = {
        maxDate: constants.MAX_YEAR + '-12-31',
        changeYear: true,
        changeMonth: true,
        dateFormat: 'yy-mm-dd',
        onSelect: function(selected) {

  $(this).parent().find(".enddate").datepicker("option","minDate", selected)
  $(this).parent().find(".startdate").datepicker("option","maxDate", selected)                   
                }

      };

    $(document).ready(function() {
      $('.datepicker').datepicker(datePickerOptions);

      $('#container').on('click', '.remove', function() {
        $(this).parent().remove();
      });

      $('#add').on('click', function() {
        var row = $('div.addNew:first').clone();
        $('#container').append(row);
        var pickers = row.find(".datepicker");
        pickers.removeAttr("id");
        pickers.removeClass("hasDatepicker");
        pickers.datepicker(datePickerOptions);
      });
    });