JSFiddle - React, Tailwind, and code Playground

by Meligy

HTML

<table>
        <tr>
            <td><input type="text" name="installDate" value="" class ="date"/> </td> 
            <td><input type="text" name="data1" value="TempData" /></td>
              <td><button type="button" onClick ="addRow(this)">Add</button></td>
         </tr>
      
 </table>

JavaScript

window. addRow = function addRow(btn) {         
    var parentRow = btn.parentNode.parentNode;
    var table = parentRow.parentNode;
    var rowCount = table.rows.length;
    var lastRow = table.rows[rowCount - 1];
    var lastDatePicker = $('.date', lastRow);
    var rowClone = $(lastRow).clone(true);
    var datePickerClone = $('.date', rowClone);
    var datePickerCloneId = 'test-id' + rowCount;
    datePickerClone.data( "datepicker", 
        $.extend( true, {}, lastDatePicker.data("datepicker") ) 
    ).attr('id', datePickerCloneId);
    datePickerClone.data('datepicker').input = datePickerClone;
    datePickerClone.data('datepicker').id = datePickerCloneId;
    $(table).append(rowClone);
    datePickerClone.datepicker();
}

$(document).on('click', function() {
$('.date').each(function() {
        $(this).datepicker();
});
});