JSFiddle - React, Tailwind, and code Playground

by squarepegsys

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.0/themes/redmond/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js"></script>

<table id="mytable">
    <thead>
        <tr>
            <thead>My Date</thead>
        </tr>
    </thead>
<tbody>
    <tr>
        <td>
            <input class="datepicker" type="text"/>
        </td>
    </tr>
    </tbody>
</table>

<button id="add-row" type="button">Add Row</button>

JavaScript

$(function () {
    $(".datepicker").datepicker();
    $("#add-row").on("click",function() {
       addRow("#mytable"); 
    });
});

function addRow(tableId) {
   // clone the last row in the table
    var tr = $(tableId).find("tbody tr:last").clone();


    // clear the values in the new row

    tr.find("input").val('');
    tr.find("select").val('');


    // append the new row to the table
    $(tableId).find("tbody tr:last").after(tr);

    tr.find(".datepicker").on("focusin",function() {
        console.log("got focus");
        $(this).datepicker();

    });   
}