Remove row after inserting them with clone() with jQuery

Question

I've a table that allow me to add or remove row.

<button data-action="add-item">Add line</button>

<table class="table">
    <thead>
        <tr>
            <th scope="col">Line</th>
            <th scope="col">Element</th>
            <th scope="col"></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                1
            </td>
            <td>
                <input type="text" name="element[]">
            </td>
            <td>
                <button data-action="remove-item">
                    Remove
                </button>
            </td>
        </tr>
        <tr>
            <td></td>
            <td class="text-right">Total:</td>
            <td>
                <input type="number" name="EST_ItemsSum">
            </td>
            <td></td>
        </tr>
    </tbody>
</table>

My issues is are:

• How can I insert the line number in front of each line ?
• How can I remove the line when I click on the Remove button (dynamic way with event propagation) ?

Here my JS code:

// Add item
$('[data-action="add-item"]').click(function(){
    $('table > tbody > tr:first').clone().find('input').val('').end().insertBefore('table > tbody > tr:last');
})

// Remove item
$('[data-action="remove-item"]').click(function(){
    $(this).closest('tr').remove();
})