Моя функция Jquery удаляет каждую следующую <tr>в таблице asp.net mvc core бритвы

Question

Я хочу динамически добавлять и удалять элементы в списке объектов в бритвенном представлении.Все было бы хорошо, но после удаления все мои последующие элементы в списке удаляются, и после этого я не могу ничего добавить.Это мой код

<tbody>

                            @for (int i = 0; i < Model.Deliveries.Count; i++)
                            {
                            <tr >

                                <td class="text-left">

                                    <input asp-for="Deliveries[i].NameOfPackage" />
                                    <span asp-validation-for="Deliveries[i].NameOfPackage" class="text-danger"></span>
                                </td>
                                <td class="text-left">
                                    <input class="items" asp-for="Deliveries[i].AddressOfDestination" />
                                    <span asp-validation-for="Deliveries[i].AddressOfDestination" class="text-danger"></span>
                                </td>
                                <td class="text-left">
                                    <input class="items" asp-for="Deliveries[i].WeightOfDelivery" />
                                    <span asp-validation-for="Deliveries[i].WeightOfDelivery" class="text-danger"></span>
                                </td>
                                <td>
                                    <button  type="button"  class="btn">Delete</button>
                                    <input asp-for="Deliveries" name="Deliveries[i].DeliveryID" type="hidden" />
                                    <input asp-for="Deliveries" name="Deliveries[i].PackageID" type="hidden" />
                                </td>

                            </tr>
                            }


                        </tbody>

Это мой и мой скрипт jquery

<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script>
$('.adder').click(function (e) {

    e.preventDefault();
    var i = ($(".items").length) / 2;
    //alert(i)
    var markup = "<tr><td><input  class='items'  asp-for='Deliveries'  name='Deliveries[" + i + "].NameOfPackage'/> </td> <td><input class='items' asp-for='Deliveries' name='Deliveries["+ i +"].AddressOfDestination'/> </td> <td> <input asp-for='Deliveries' name='Deliveries[" + i + "].WeightOfDelivery' /></td> <td> <button id='i' class='btn'>Delete</button> </td></tr > ";



        $('.table tbody').append(markup);
});



    $('.table tbody').on('click', '.btn', function (e) {

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

</script>

Мой класс выглядит следующим образом

public  class MainPackagesIndexData
{

    public MainPackage MainPackage { get; set; }
    public Delivery Delivery { get; set; }
    public List<Delivery> Deliveries { get; set; }
    public MainPackagesIndexData()
    {
        Deliveries = new List<Delivery>();
        Delivery = new Delivery();
        MainPackage = new MainPackage();
    }

}

и в этом виде бритвы яиспользуя его модель

@model Task1PackagesSender.Models.MainPackagesIndexData

Так что мой вопрос заключается в том, как удалить эти объекты из списка и сохранить каждое следующее в этом списке, и можно правильно добавить еще одно, спасибо