JSFiddle - React, Tailwind, and code Playground

by aanred

HTML

<table class="split">
    <thead>
        <tr>
            <td>Destination</td>
            <td>Weight</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><input type="text" name="split_url[]" /></td>
            <td><input type="text" name="split_weight[]" /></td>
        </tr>
    </tbody>
</table><br />
<input type="button" class="add-btn" value="Add" />

JavaScript

$(function(){
    $('.add-btn').click(function(){
        var tr = $('tr:last-child', 'table.split>tbody').clone();
        tr.find('input').val('');
        
        var td = $('td:last-child', tr);
        if($('tr:last-child', 'table.split>tbody').index() > 0) {
            td.find('.del-btn').remove();
            td.append('<input type="button" class="del-btn" value="x">');
        }
        $('tbody', 'table.split').append(tr);
    });
    
    $('table.split>tbody').on('click', '.del-btn', function(){
        $(this).closest('tr').remove();
    });
});