JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<script src="Scripts/jquery-1.11.0.min.js"></script>
    <script src="Scripts/jquery-ui-1.8.24.min.js"></script>
    <script src="Scripts/jquery.dataTables.min.js"></script>
<input type="button" id="addRow"/>
<table id=example class=display cellSpacing=0 width="100%"> 
                <thead> 
                    <tr> 
                        <th>Column 1</th> 
                        <th>Column 2</th> 
                        <th>Column 3</th> 
                        <th>Column 4</th> 
                        <th>Column 5</th>
                    </tr>
                </thead> 
                <tfoot>
                     <tr>
                          <th>Column 1</th>
                          <th>Column 2</th>
                          <th>Column 3</th>
                          <th>Column 4</th>
                          <th>Column 5</th>
                     </tr>
                </tfoot>
            </table>
</body>

JavaScript

$(document).ready(function () {
            debugger;
            var t = $('#example').DataTable({ "searching": false, "paging": false });
            var counter = 1;
            $('#addRow').on('click', function () {
                t.row.add([counter + '.1', counter + '.2', counter + '.3', counter + '.4', counter + '.5']).draw();
                counter++;
            }); // Automatically add a first row of data 
            $('#addRow').click();
        });