JSFiddle - React, Tailwind, and code Playground

HTML

<div id="Box_tmpl" style="border:solid 1px #777; background:#ddd; display: none">
        <a class="remove-box" href="#">remove</a>
        <div>
            <label for="PeriodStart">Period (start):</label>
            <input id="PeriodStart" class="start-end-date" name="period_start" readonly="readonly" />
        </div>
        <div>
            <label for="PeriodEnd">Period (end):</label>
            <input id="PeriodEnd" class="start-end-date" name="period_end" readonly="readonly" />
        </div>
    </div>

    <a class="add-box" href="#" style="margin: 6px 0 10px auto;">add</a>

    <div id="Boxes">    
    </div>

JavaScript

$('.start-end-date').datepicker({ dateFormat: "yy-mm-dd" });

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

$('.add-box').click(function(){
        $('#Box_tmpl').clone().removeAttr('id').show().appendTo('#Boxes');
        $('.start-end-date').datepicker({ dateFormat: "yy-mm-dd" });
        return false;
});