JSFiddle - React, Tailwind, and code Playground

by Eric Howe

HTML

<p>Make sure your JavaScript console is open to see what the "date" links do.</p>
<table id="table2">
    <tbody>
        <tr>
            <td>
                <input type="text" name="roomcat[1]" value="Deluxe">
            </td>
            <td>
                <select name="roomtype[1]">
                    <option value="">Please Select</option>
                    <option value="Single">Single</option>
                    <option value="Double">Double</option>
                    <option value="Triple">Triple</option>
                    <option value="Extra">Extra</option>
                </select>
            </td>
            <td>
               <input type="text" name="from[1]">
                <a class="datepicker">date</a>
            </td>
            <td>
                <input type="text" name="to[1]">
                <a class="datepicker">date</a>
            </td>
        </tr>
    </tbody>
</table>
<button id="addrow">Add Row</button>

CSS

a {
    color: blue;
    cursor: pointer;
}
a:hover {
    color: red;
}

JavaScript

$('a.datepicker').click(function() {
    var $input = $(this).closest('td').find('input[type=text]');
    console.log('datepicker ' + $input.attr('name'));
    // call displayDatePicker($input.attr('name'), false, 'dmy', '-');
});

$("#addrow").click(function() {
    var n   = $('#table2 tbody>tr').length + 1;
    var row = $('#table2 tbody>tr:last').clone(true);
    row.find('input:text, select').each(function() {
        this.name = this.name.replace(/\[(\d+)\]$/, '[' + n + ']');
    })
    row.insertAfter('#table2 tbody>tr:last');
    return false;
});