JSFiddle - React, Tailwind, and code Playground

by irwan dwiyanto

HTML

<h2>
    <a href="#" id="addScnt">Add Another Input Box</a>
</h2>
<table class="dynatable">
    <thead>
        <tr>
            <th>Type</th>
            <th>Account Name</th>
            <th>Debit</th>
            <th>Credit</th>
        </tr>
    </thead>
    <tbody id="p_scents">
        <tr>
            <td>
                <select name="type" id="type">
                    <option value="Debit">Debit</option>
                    <option value="Credit">Credit</option>
                </select> 
             </td>
     
            <td>
                <select name="accounts" id="accounts">
                    <option value="">SELECT</option>
                    <option value="One">One</option>
                    <option value="Two">Two</option>
                </select>
            </td>

            <td>
                <input type="text" name="debit_amount" id="debit_amount" />
            </td>
            <td>
                <input type="text" name="credit_amount" id="credit_amount"/>
            </td>

        </tr>
    </tbody>
</table>

CSS

{ font-family:Arial; }
h2 { padding:0 0 5px 5px; }
h2 a { color: #224f99; }
a { color:#999; text-decoration: none; }
a:hover { color:#802727; }
p { padding:0 0 5px 0; }

input { padding:5px; border:1px solid #999; border-radius:4px; -moz-border-radius:4px; -web-kit-border-radius:4px; -khtml-border-radius:4px; }

JavaScript

var scntDiv = $('#p_scents');
var i = $('#p_scents tr').size() + 1;

$('#addScnt').click(function() {
    scntDiv.append('<tr><td><select name="type" id="type"><option value="Debit">Debit</option><option value="Credit">Credit</option></select></td><td><select name="accounts" id="accounts"><option value="">SELECT</option><option value="One">One</option><option value="Two">Two</option></select></td><td><input type="text" name="debit_amount" id="debit_amount"/></td><td><input type="text" name="credit_amount" id="credit_amount"/></td><td><a href="#" id="remScnt">Remove</a></td></tr>');   
    i++;
    return false;
});

//Remove button
$(document).on('click', '#remScnt', function() {
    if (i > 2) {
        $(this).closest('tr').remove();
        i--;
    }
    return false;
});