JSFiddle - React, Tailwind, and code Playground

by Kamal Rawat

HTML

<!DOCTYPE HTML>
<html lang="en-IN">
    
    <body>
        <div id="form">
            <div>
                <div class="form-fields">
                    <table>
                        <tr>
                            <th>Organization</th>
                            <th>Facility</th>
                            <th>Department</th>
                            <th>Friendly Name</th>
                            <th>Floor</th>
                            <th>Wing</th>
                            <th>Nurse Station Phone #</th>
                        </tr>
                        <tr id="template">
                            <td>
                                <input type="text" class="form_id" size="5px" />
                            </td>
                            <td>
                                <input type="text" class="form_name" size="5px" />
                            </td>
                            <td>
                                <input type="text" class="form_col3" size="5px" />
                            </td>
                            <td>
                                <input type="text" class="form_col4" size="5px" />
                            </td>
                            <td>
                                <input type="text" class="form_col4" size="5px" />
                            </td>
                            <td>
                                <input type="text" class="form_col4" size="5px" />
                            </td>
                            <td>
                                <input type="text" class="form_col5" size="5px" />
                            </td>
                            <td>
                                <input type="button" class="remove" value="remove" />
                            </td>
                        </tr>
                    </table>
                </div>
                <!--.form-fields-->
            </div>
            <input type="button" id="add-line"...

CSS

.form_id {
    width:60px;
}
.form_name {
    width:60px;
}
.form_col3 {
    width:70px;
}
.form_col4 {
    width:60px;
}
.form_col5 {
    width:50px;
}
.remove {
    display:none;
}

JavaScript

$(document).ready(function () {
    var template = $('#template'),
        id = 0;

    $("#add-line").click(function () {
        var row = template.clone();
        template.find("input:text").val("");
        row.attr('id', 'row_' + (++id));
        row.find('.remove').show();
        template.before(row);
    });

    $('.form-fields').on('click', '.remove', function () {
        $(this).closest('tr').remove();
    });
});