JSFiddle - React, Tailwind, and code Playground

by Dave Mednick

HTML

<input type="text" id="order">
<table width="100%" border="0" cellspacing="0" cellpadding="5" id="table-data">
    <tr>
        <td></td>
        <td>First name</td>
        <td>Last Name</td>
        <td>Email</td>
        <td>Options</td>
        <td>Add</td>
        <td>Remove</td>
    </tr>
    <tbody>
        <tr class="tr_clone" id="listItem_123">
            <td class="handle">+</td>
            <td>
                <input type="text" id="who" name="who">
            </td>
            <td>
                <input type="text" id="location" name="location">
            </td>
            <td>
                <input type="text" id="date_picker" name="start" class="datepicker">
            </td>
            <td>
                <select name="dave">
                    <option value="">Please Select</option>
                    <option value="1">Option1</option>
                    <option value="2">Option2</option>
                </select>
            </td>
            <td>
                <input type="button" name="add" value="Add" class="tr_clone_add">
            </td>
            <td>
                <input type="button" name="remove" value="Remove" class="tr_clone_remove">
            </td>
        </tr>
    </tbody>
</table>

CSS

#table-data {
    width:800px;
    margin-left:auto;
    margin-right:auto;
}
td.handle {
    cursor:move
}

JavaScript

$(document).ready(function () {
    $("input.tr_clone_add").live('click', function () {
        var counter = 0;
        var max_rows = 5;
        counter = $('.tr_clone').length;
        if (parseInt(counter,10) < max_rows) {
            var $tr = $(this).closest('.tr_clone');
            var $clone = $tr.clone();
            $clone.find(':text').val('');
            $tr.after($clone);
        }
    });
    $("input.tr_clone_remove").live('click', function () {
        $(this).closest("tr").remove();
    });
    $("#table-data tbody").sortable({
        handle: '.handle',
        items: 'tr',
        update: function () {
            var order = $("#table-data").sortable();

        }
    });
});