How To Disable The End Dates Of A Datepicker That Are Lesser Than Or Equal To Start Date For Dynamic Fields

Here only for the default values the end dates lesser than start dates are disabled. How do i have it done for the dynamic fields as well?

Solution 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);
      });
    });