JSFiddle - React, Tailwind, and code Playground

by Nibin George

HTML

<form>
<table class="dynatable">
    <thead>
        <tr>
            <th>Col 1</th>
            <th>Col 2</th>
            <th>Col 3</th>
            <th>Col 4</th>
        </tr>
    </thead>
    <tbody id="edu_table">
        <tr>
            <td><input type='text' value='test1' readonly /></td>
            <td><input type='text' value='test2' readonly /></td>
            <td><input type='text' value='test3' readonly /></td>
            <td><input type='text' value='test4' readonly /></td>
        </tr>
    </tbody>
</table>
</form>
<h2>
    <a href="#" id="addScnt">Add Another Row</a>
</h2>

CSS

table { 
    border-spacing: 16px;
    border-collapse: separate;
}

JavaScript

var scntDiv = $('#edu_table');
$('#addScnt').click(function() {
    scntDiv.append("<tr><td><input type='text'/></td><td><input type='text'/></td><td><input type='text'/></td><td><input type='text'/></td></tr>");   
    return false;
});