JSFiddle - React, Tailwind, and code Playground

by matthttam

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/v/bs4/dt-1.10.21/b-1.6.2/cr-1.5.2/datatables.min.css">
<script src="https://cdn.datatables.net/v/bs4/dt-1.10.21/b-1.6.2/cr-1.5.2/datatables.min.js"></script>
<table class="table table-hover table-sm" id="MultiAddTable" style="">
<thead>
    <tr><td></td><th scope="col">Last login by</th><th scope="col">IP Address</th><th scope="col">Hostname</th><th scope="col">Status</th></tr>
</thead>
<tbody>
    <tr><td></td><td><input type="text" name="last_login_by_8000603914" =""="" data-placeholder="Select a Last login by" options="" class="form-control"></td><td><input type="text" name="computer_ip_address_8000603914" =""="" data-placeholder="Select an IP Address" options="" class="form-control"></td><td><input type="text" name="hostname_8000603914" =""="" data-placeholder="Select a Hostname" options="" class="form-control"></td><td><div name="status" class="container"></div></td></tr>
</tbody>
</table>

JavaScript

$(document).ready(function() {
        // Hide Label Tools
        $('div[name="LabelTools"]').hide();

        var Table = $('#MultiAddTable');
        Table.find('thead > tr').append('<th scope="col">Status</th>');
        Table.find('tbody > tr').append('<td><div name="status" class="container"></div></td>');

        // Show table
        Table.show();

        // Initialize DataTable
        $('#MultiAddTable').DataTable({
            paging: false,
            searching: false,
            ordering: false,
            colReorder: {
                fixedColumnsLeft: 1,
                fixedColumnsRight: 1
            },
            columnDefs: [{
                targets: 0,
            },{
                visible: false,
                targets: -1
            } ],
            order: [
                [
                    1, 'asc',
                ],
            ],
            dom: '<"dtToolbar">',

            fnInitComplete: function() {
                var dt = $(this).DataTable();
                $addRow = ' <div class="input-group">\
                                <div class="input-group-prepend">\
                                <button id="dtAddRow" class="btn  btn-info" tabindex="0" aria-controls="MultiAddTable" type="button" ><span>Add Rows</span></button>\
                                </div>\
                                <input id="dtAddRowCount" class="form-control" type="number" value="1" min="1" style="text-align:center">\
                            </div>';
                $removeRow = '<button id="dtRemoveRow" class="btn btn-info" tabindex="1" aria-controls="MultiAddTable" type="button" disabled="disabled"><span>Remove Row</span></button>';
                $toolbar = '\
                    <div class="container">\
                        <div class="row justify-content-start">\
                            <div class="col-3">\
                                ' + $addRow + '\
                            </div>\
                         ...