JSFiddle - React, Tailwind, and code Playground

by SHELDON PASCIAK

HTML

<table cellspacing="10" class="tbll">
    <tr>
        <td>Choose Sub Heading</td>
        <td>
            <select name="subheading_id" style="min-width:145Px">
                <option value="1"> Sub heading Me</option>
                    <option value="2"> Sub heading Me 2</option>
            </select>
        </td>
        <td>&nbsp;</td>
    </tr>
    <tr class="cloneme">
        <td>Choose Job Title</td>
        <td>
            <select name="jobtitles_id" style="min-width:145Px">
                <option value="a">A</option>
                <option value="b">B</option>
                <option value="c">C</option>
                <option value="none">None</option>
            </select>
        </td>
    </tr>
    <tr>
        <td>
            <div class="addjob">Add another Job Title</div>
        </td>
    </tr>
</table>

JavaScript

$(".addjob").click(function () {
    var $clone = $('table.tbll tr.cloneme:first').clone();
    console.log($clone);
    $clone.append("<td><div class='rmv' >Remove</div></td>");
    $('table.tbll').append($clone);
});

$('.tbll').on('click', '.rmv', function () {

     $(this).closest('tr').remove();
});