JSFiddle - React, Tailwind, and code Playground

HTML

<button id="add-row">Add row</button>
<table id="periodsTable">
    <tbody>
        <tr>
            <td>
                <input type="hidden" id="periodIds" name="periodIds" value="0" />
                <input width="100%" type="string" id="periodsNames" name="periodsNames" value="None" />
            </td>
            <td>
                <input type="text" class="datepicker" value="2014-10-09" />
            </td>
            <td>
                <input type='text' id="periodEndDates" name="periodEndDates" value="2014-10-09" />
            </td>
            <td>
                <a href="#" class="remove-row"><span class="glyphicon glyphicon-minus">Remove</span></a>
            </td>
        </tr>
    </tbody>
</table>

JavaScript

$(function () {
    // Adding DatePicker to the elements already in the page.
    $('.datepicker').datepicker();

    $('#add-row').on('click', function (e) {
        e.preventDefault();
        var tableBody = $('#periodsTable > tbody');
        var lastRowClone = $('tr:last-child', tableBody).clone(false);

        //setting periodId to -1 for any created periods
        $('td:first input[name=periodIds]', lastRowClone).val("-1");

        tableBody.append(lastRowClone);

        // Adding DatePicker to the new element added to the page.
        lastRowClone.find('.datepicker').attr('id', '').removeClass('hasDatepicker').datepicker();
    });
});