How to create ajax request properly – Jquery ajax

C#, Razor Pages. I have a Partial View called _Articles. It displays Articles in a table. Articles are populated from a Model. It also contains button (okay, not button, anchor) for deleting articles: <a asp-page-handler="delete" asp-route-ArticleId="@item.Id" id="deleteBtn" class="btn bg-danger mr-1">Delete</a>. @item.Id is unique id of each article. This is processed by get handler in parents page, request looks like this: /Orders/Edit/1/58?handler=delete. So far so good.
But I would like to achieve this without postback, which is impossible with get, right?. So I created another button:

<form method="post">                                 
         <input type="submit" class="btn bg-danger mr-1 delete" id="@item.Id" asp-route-ArticleId="@item.Id" asp-page-handler="delete" value="Delete" />
                            </form>

And I created new post handler in parents page. Post request goes to same url as get request and yes, it is working.

But it still does postback which I would like to avoid. So now I would like to use ajax and I’m fighting with it. I add css ‘delete’ class to every button which I would like to use. Then I used this jquery:

$('.delete').on('click', function (evt) {
            evt.preventDefault();
            $.ajax({
                type: "POST",
                url: window.location.href + '?handler=Delete',
                data: $('form').serialize(),
                headers: { "RequestVerificationToken": $('input[name="__RequestVerificationToken"]').val() },
                success: function () {
                    $('#articles').load(window.location.href + '?handler=Refresh');
                }
            }
            )

        });

Obviously it can’t work, because I’m missing the @item.Id parameter in url. But I don’t know how to pass it. Should I use another jquery selector to find nearest @item.Id? This should not be that hard, I can see the correct url in a formaction of the button, but how to access it with jquery?

Whole partial view:

@model IEnumerable<Models.ArticlesInOrder>
<table class="table">
    <tr>
        <th></th>
        <th>PN</th>
        <th>Name</th>
        <th>Nickname</th>
        <th>Quantity</th>
    </tr>

    @foreach (var item in Model)
    {
        var tm = "#myModal" + item.Id;
        var mid = "myModal" + item.Id;

        <tr>
            <td>
            </td>
            <td>
                @item.Article.PN
            </td>
            <td>
                @item.Article.Name
            </td>
            <td>
                @item.Article.Nickname
            </td>
            <td>
                @item.Quantity
            </td>

            <td>
                <a asp-page="EditArticle" class="edit" asp-route-id="@item.Id">Edit</a>
                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="@tm" formmethod="post">
                    Delete
                </button>

                <div class="modal fade" id="@mid" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                <h4 class="modal-title" id="myModalLabel">Delete Confirmation</h4>
                            </div>
                            <div class="modal-body">
                                Are you sure want to delete this item?
                            </div>
                            <div class="modal-footer">
                                <a asp-page-handler="delete" asp-route-ArticleId="@item.Id" id="deleteBtn" class="btn bg-danger mr-1">Delete</a>
                                <form method="post">

                                    <input type="submit" class="btn bg-danger mr-1 delete" id="@item.Id" asp-route-ArticleId="@item.Id" asp-page-handler="delete" value="Delete" />
                                </form>
                                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

                            </div>
                        </div>
                    </div>
                </div>
            </td>
        </tr>
    }

</table>