JSFiddle - React, Tailwind, and code Playground

by mccannf

HTML

<div id="training">
    <div id="TrainingPeriod1" class="trainingperiod">
        Start: <input id="TrainingPeriodStart100" />
        End: <input id="TrainingPeriodEnd100" />
    </div>
</div>
<button id="addTP" class="add" href="#">Add Training Period</button>

JavaScript

$(function() {
    var inputName = '';
    var number = '';
    
    var template = $('#training .trainingperiod:first').clone(),
        trainingPeriodCount = 1;

    var addTrainingPeriod = function(){
        trainingPeriodCount++;
        var trainingPeriod = template.clone().find(':input').each(function(){
            var newId = this.id.substring(0, this.id.length-1) + trainingPeriodCount;
            this.name = this.id = newId; // update id and name (assume the same)
        }).end() // back to .trainingperiod
        .attr('id', 'TrainingPeriod' + trainingPeriodCount) // update attendee id
        .prependTo('#training'); // add to container
        
        $('#TrainingPeriod' + trainingPeriodCount).find('input[id^="TrainingPeriodStart"]').datepicker({
            changeYear: true,
            changeMonth: true,
            dateFormat: 'yy-mm-dd',
            onSelect: function( selected ) {
                var thisInput = $(this).attr('id');
                var thisNumber = thisInput.substr(thisInput.length - 3);
                $('#TrainingPeriodEnd'+thisNumber).datepicker( "option", "minDate", 
                    selected )
            }
        });
        $('#TrainingPeriod' + trainingPeriodCount).find('input[id^="TrainingPeriodEnd"]').datepicker({
            changeYear: true,
            changeMonth: true,
            dateFormat: 'yy-mm-dd',
            onSelect: function( selected ) {
                var thisInput = $(this).attr('id');
                var thisNumber = thisInput.substr(thisInput.length - 3);
                $('#TrainingPeriodStart'+thisNumber).datepicker( "option", "maxDate", 
                    selected )
            }
        });        
    };

    $('.add').click(addTrainingPeriod); // attach event

    $('input[id^="TrainingPeriodStart"]').click(function() {
        inputName = $(this).attr('id');
        number = inputName.substr(inputName.length - 3); // get [number]
    }).datepicker({
        changeYear: true,
       ...