JSFiddle - React, Tailwind, and code Playground

by mandarin6b0

HTML

<div id="editorRows">
    <div class="deleteRow">
        <div class="formInput">
            <input type="text" id="beginDate" class="dpicker">
        </div>
        <div class="formInput">
            <input type="id" id="endDate" class="dpicker">
        </div>
<a href="#" id="addItem" class="addItem">add</a>

    </div>
</div>

JavaScript

$('body').on('focus', ".dpicker", function () {
    $(this).datepicker();
});

$(document).on('click', '.addItem', function () {
    var last_date;
    $.ajax({
        url: this.href,
        cache: false,
        success: function (html) {
            last_date = $('.deleteRow:last .formInput:last input').val();
            $("#editorRows").append(str);
            $('.deleteRow:last .formInput:first input').val(last_date);
        }
    });
    return false;
});

$(document).on('click', 'a.deleteRow', function () {
    $(this).closest("div").remove();
    return false;
});

var str = '<div class="deleteRow">' +
    '<div class="formInput">' +
    ' <input type="text" id="" class="dpicker">' +
    '</div>' +

    '<div class="formInput">' +
    '   <input type="id" id="" class="dpicker">' +
    '</div> ' +
    '<a href="#" id="addItem" class="addItem">add</a>' +
    '</div>';

$(function () {
    $("#beginDate").datepicker({
        minDate: 1,
        changeMonth: true,
        dateFormat: 'mm/dd/yy',
        onClose: function (selectedDate, instance) {
            if (selectedDate != '') {
                $("#endDate").datepicker("option", "minDate", selectedDate);
                var date = $.datepicker.parseDate(instance.settings.dateFormat, selectedDate, instance.settings);
                date.setMonth(date.getMonth() + 3);
                var minDate2 = new Date(selectedDate);
                minDate2.setDate(minDate2.getDate() + 1);

                $("#endDate").datepicker("option", "minDate", minDate2);
                $("#endDate").datepicker("option", "maxDate", date);
            }
        }
    });
    $("#endDate").datepicker({
        minDate: 1,
        changeMonth: true,
        dateFormat: 'mm/dd/yy',
        onClose: function (selectedDate) {
            $("#beginDate").datepicker("option", "maxDate", selectedDate);
        }
    });
});