Q:

.remove() is not working properly on .append() jquery except first row

In the Code below, It's an invoice management system and one customer could have more than one orders.  The button Add New Item works perfectly when adding new rows but when trying to delete it, it's not getting delete until I delete the first row.
Here is the the first row in the table.
<tbody id="TableBody">
    <tr>
        <td style="width: 220px">
            <input type="text" class="form-control" name="Item" id="Item" placeholder="Nombre del producto" required autocomplete="off">
        </td>
        <td>
            <input type="number" name="QTV" min="1" name="QTV" id="QTV" class="form-control text-right" placeholder="00" required>
        </td>
        <td>
            <input step="2" type="number" class="form-control text-right" min="1" id="Rate" placeholder="0.00" readonly>
        </td>
        <td>
            <input step="any" id="Disc" name="Disc" type="number" min="0" name="" class="form-control text-right" placeholder="00">
        </td>
        <td>
            <input type="text" name="SubTotal" class="form-control text-right" id="Total" placeholder="Total" readonly>
        </td>
        <td>
            <button type="button" class="btn btn-danger" id="DelRow">Delete</button>
        </td>
    </tr>
</tbody>

Here is the code to append (Add New Row) beneath the old one

    $('#AddNewItem').click(function() {
    $('#TableBody').append(`
    <tr>
        <td style='width: 220px'>
            <input type='text' class='form-control' name='Item' id='Item' placeholder='Nombre del producto' required autocomplete='off'>
        </td>
        <td>
            <input type='number' name='QTV' min='1' name='QTV' id='QTV' class='form-control text-right' placeholder='00' required>
        </td>
        <td>
            <input step='2' type='number' class='form-control text-right' min='1' id='Rate' placeholder='0.00' readonly>
        </td>
        <td>
            <input step='any' id='Disc' name='Disc' type='number' min='0' name='' class='form-control text-right' placeholder='00'>
        </td>
        <td>
            <input type='text' name='SubTotal' class='form-control text-right' id='Total' placeholder='Total' readonly>
        </td>
        <td>
            <button type="button" class="btn btn-danger" id="DelRow">Delete</button>
        </td>
    </tr>
    `);
    });

Here is the code to delete the current row but it's not working correctly on appended rows.
$('#DelRow').click(function(){
    var rowCount = $('#TableBody tr').length;

        $("#TableBody").delegate("#DelRow", "click", function () {
            $(this).closest('tr').remove();
    });
});

Screenshot
I'll be thankful for contributions.

A:

Use class to identify the Delete button, because id must be unique in HTML:
  <button type="button" class="btn btn-danger DelRow">Delete</button>

Then, you should not nest click handlers, just only use the delegation handler you had. Note however that delegate is a deprecated method. Use on instead (which has the first two arguments reversed):
$("#TableBody").on("click", ".DelRow", function () {
    $(this).closest('tr').remove();
});

$('#AddNewItem').click(function() {
    $('#TableBody').append(`
        <tr>
            <td style='width: 220px'>
                <input type='text' class='form-control' name='Item' id='Item' placeholder='Nombre del producto' required autocomplete='off'>
            </td>
            <td>
                <input type='number' name='QTV' min='1' name='QTV' id='QTV' class='form-control text-right' placeholder='00' required>
            </td>
            <td>
                <input step='2' type='number' class='form-control text-right' min='1' id='Rate' placeholder='0.00' readonly>
            </td>
            <td>
                <input step='any' id='Disc' name='Disc' type='number' min='0' name='' class='form-control text-right' placeholder='00'>
            </td>
            <td>
                <input type='text' name='SubTotal' class='form-control text-right' id='Total' placeholder='Total' readonly>
            </td>
            <td>
                <button type="button" class="btn btn-danger DelRow">Delete</button>
            </td>
        </tr>
    `);
});


$("#TableBody").on("click", ".DelRow", function () {
    $(this).closest('tr').remove();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
    <tbody id="TableBody">
        <tr>
            <td style="width: 220px">
                <input type="text" class="form-control" name="Item" id="Item" placeholder="Nombre del producto" required autocomplete="off">
            </td>
            <td>
                <input type="number" name="QTV" min="1" name="QTV" id="QTV" class="form-control text-right" placeholder="00" required>
            </td>
            <td>
                <input step="2" type="number" class="form-control text-right" min="1" id="Rate" placeholder="0.00" readonly>
            </td>
            <td>
                <input step="any" id="Disc" name="Disc" type="number" min="0" name="" class="form-control text-right" placeholder="00">
            </td>
            <td>
                <input type="text" name="SubTotal" class="form-control text-right" id="Total" placeholder="Total" readonly>
            </td>
            <td>
                <button type="button" class="btn btn-danger" id="DelRow">Delete</button>
            </td>
        </tr>
    </tbody>
</table>

<button id="AddNewItem">Add New</button>

