Why is the first row in an ASP.NET Core MVC table un-editable? - entity-framework

Question

By far the weirdest problem encountered to date: I am populating a table using #foreach (var item in Model) and every row has an edit and delete button.
The edit button triggers a modal where the user can make changes and click the Save button to save any changes. It works perfectly on every row except the first row.
Let's say I have 2 records in the table with IDs 1 & 2. I can edit 2 but not 1 where 1 is on the first row of the table. If I delete 1 leaving only 2 (now obviously at the top), I can't edit that so it is not related to the data in the item but somehow related to the fact that it is the first item being loaded into the table.
The view is returning with an enormous URL which includes a __RequestVerificationToken and there is no POST action recorded in the network.
This is the code in the Index.cshtml which calls the modal:
<td style="text-align: center">
<a asp-action="Edit" data-bs-toggle="modal" data-bs-target=" #("#editNode-" + item.Id)">
<i class="fas fa-edit" ></i>
</a>
#await Html.PartialAsync("_EditNodePartialView", item)
</td>
This is the _EditNodePartialView markup and code:
#model UnidAdmin.Models.BundleNodeViewModel
<div class="modal fade" id="editNode-#Model.Id">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" style="color:darkorange">Edit Node #Model.Id Bundle #Model.BundleId</h5>
<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close" style="background-color:transparent; color:aquamarine; border-style:none">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form asp-controller="Nodes" asp-action="Edit" asp-route-id="#Model.Id" asp-route-src="bndlnd" method="post">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="row pb-3">
<div class="col form-group text-start">
<label asp-for="Name" class="control-label text-start" style="color:darkorange">Node Name</label>
<input asp-for="Name" class="form-control" />
<span asp-validation-for="Name" class="text-danger"></span>
</div>
<div class="col form-group text-start">
<label asp-for="Comment" class="control-label text-start" style="color:darkorange"></label>
<input asp-for="Comment" class="form-control" />
<span asp-validation-for="Comment" class="text-danger"></span>
</div>
</div>
<div class="row pb-3">
<div class="col form-group form-check text-center">
<label class="form-check-label text-start" style="color:darkorange">
<input class="form-check-input" asp-for="IsTest" /> #Html.DisplayNameFor(model => model.IsTest)
</label>
</div>
<div class="col form-group form-check text-center">
<label class="form-check-label text-start" style="color:darkorange">
<input class="form-check-input" asp-for="IsLocked" /> #Html.DisplayNameFor(model => model.IsLocked)
</label>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary" onclick="displayBusyIndicator()" data-bs-dismiss="modal">Save</button>
</div>
</form>
</div>
</div>
</div>
</div>
And this is the controller edit action method:
public async Task<IActionResult> Edit(int id, [FromForm]Node editnode, string src)
{
// Lots of code here //
return RedirectToAction(nameof(Index));
}
As I said, it hits the controller for every row except the first row, whatever the record.
Has anyone ever encountered anything like this and if so what was your solution?