JSFiddle - React, Tailwind, and code Playground

by DudeWB

HTML

<script src="http://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js"></script>
<table id="tabledata">
    <thead>
        <th>Select</th>
        <th>Border Location Name</th>
        <th>Cable Location</th>
        <th>Direction of Vault Wall</th>
        <th>Cable Type</th>
        <th>Cable Size (pairs)</th>
        <th>Cable Gauge</th>
        <th>Vertical(s) appeared on Verticals</th>
        <th>Approximate Number of Jumpers</th>
        <th>Are Protectors Still In?</th>
        <th>Metered Distance</th>
        <th class="comments">Central Office Comments</th>
    </thead>
    <tbody id="input"></tbody>
    <tbody id="template">
        <tr>
            <td>
                <input name="selected" type="checkbox" />
            </td>
            <td>
                <input name="border_location" type="text" />
            </td>
            <td>
                <input name="cable_location" type="text" />
            </td>
            <td>
                <input name="vault_direction" type="text" />
            </td>
            <td>
                <input name="cable_type" type="text" />
            </td>
            <td>
                <input name="cable_size" type="text" />
            </td>
            <td>
                <input name="cable_gauge" type="text" />
            </td>
            <td>
                <input name="vertical" type="text" />
            </td>
            <td>
                <input name="jumpers" type="text" />
            </td>
            <td>
                <input name="protectors" type="text" />
            </td>
            <td>
                <input name="metered_dist" type="text" />
            </td>
            <td>
                <input name="comments" type="text" />
            </td>
        </tr>
    </tbody>
</table>
<button id="ActionAddRow">Add Row</button>
<button id="ActionSubmit">Submit</button>

CSS

tbody #template {
    display: none;
}

JavaScript

$(function () {
    var addInputRow = function () {
        $('#input').append($('#template').html());
    };

    addInputRow();
    $('#ActionAddRow').on('click', addInputRow);
    $('#ActionSubmit').on('click', function () {
        var data = $('#input tr').map(function () {
            var values = {};
            $('input', $(this)).each(function () {
                if (this.type === 'checkbox') {
                    values[this.name] = this.checked;
                } else {
                    values[this.name] = this.value;
                }
            });
            return values;
        }).get();
        $.post('/echo/json/', {
            json: JSON.stringify(data),
            delay: 1
        }).done(function (response) {
            alert("POST success");
            console.log(response);
        });
    });
});