JSFiddle - React, Tailwind, and code Playground

HTML

<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"/>
    End Date :
    <input name='settings[end_date][]', value="2018-06-25"
    class="datepicker year-date-month-calendar input-small removetradingdates-block"/>
    <input type="button" class="remove" value="Remove" />
  </div>
  <input type="button" id="add" value="Add Periods" />
</div>

JavaScript

var constants = {
  MAX_YEAR: "2020"
};

var datePickerOptions = {
    maxDate: constants.MAX_YEAR + '-12-31',
    changeYear: true,
    changeMonth: true,
    dateFormat: 'yy-mm-dd'
  };

$(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);
  });
});