ASP .NET Core 2.1 - How to dynamically remove html table rows while maintaining proper indexing

In the below example code using ASP .NET Core 2.1, I am dynamically adding a table row when the add button is clicked. The row contains 3 input boxes and one button (a minus symbol which removes the row when clicked). I'm struggling to find the best way to handle the deletion since I want to preserve model-binding when the form is posted. The rows in this table should populate List<People> when the form is submitted.

Is there a more elegant way to handle this besides re-indexing each row every time a delete happens? Any examples I can review will be much appreciated.


Initial view from HttpGet controller

<div>
	<table class="table table-condensed" id="people-list">
		<thead>
		<tr>
			<th>First Name</th>
			<th>Last Name</th>
			<th>Email Address</th>
		</tr>
		</thead>
		<tbody>
		@for (var i = 0; i < Model.PeopleList.Count; i++)
		{
			<tr>
				<td>
					@Html.HiddenFor(m => Model.PeopleList[i].FirstName)
					@Html.TextBoxFor(m => Model.PeopleList[i].FirstName, new { @class = "row-index form-control"})
				</td>
				<td>
					@Html.HiddenFor(m => Model.PeopleList[i].LastName)
					@Html.TextBoxFor(m => Model.PeopleList[i].LastName, new { @class = "form-control" })
				</td>
				<td>
					@Html.HiddenFor(m => Model.PeopleList[i].Email)
					@Html.TextBoxFor(m => Model.PeopleList[i].Email, new { @class = "form-control" })
				</td>
				<td>
					<button class="btn btn-default" id="remove-person-@i"><i class="glyphicon glyphicon-minus"></i></button>
				</td>
			</tr>
		}                    
		</tbody>
	</table>
</div>
<div>
	<div class="btn-group">
		<button type="button" class="btn btn-primary" id="add-person"><i class="glyphicon glyphicon-plus"></i>Add Person</button>
		<br/><br/>
	</div>
</div>

Select allOpen in new window

Add new row

$("#add-person").click(function() {
    var i = $(".row-index").length;
    $.ajax({
        url: "people/AddPerson?index=" + i,
        success: function (data) {
            $('#people-list > tbody').append(data);
        },
        error: function (a, b, c) {
            console.log(a, b, c);
        }
    });  
});

Select allOpen in new window

Partial View that returns a template row

<tr>
    <td>
        <input id="People_@(ViewBag.Index)__FirstName" name="People[@(ViewBag.Index)].FirstName" type="hidden" value="Bob">
        <input id="People_@(ViewBag.Index)__FirstName" name="People[@(ViewBag.Index)].FirstName" type="text" value="Bob" class="form-control">
    </td>
    <td>
        <input id="People_@(ViewBag.Index)__LastName" name="People[@(ViewBag.Index)].LastName" type="hidden" value="Smith">
        <input id="People_@(ViewBag.Index)__LastName" name="People[@(ViewBag.Index)].LastName" type="text" value="Smith" class="form-control">
    </td>
    <td>
        <input id="People_@(ViewBag.Index)__Email" name="People[@(ViewBag.Index)].Email" type="hidden" value="bsmith@yopmail.com">
        <input id="People_@(ViewBag.Index)__Email" name="People[@(ViewBag.Index)].Email" type="text" value="bsmith@yopmail.com" class="form-control">
    </td>
    <td>
        <button class="btn btn-default" id="remove-person"><i class="glyphicon glyphicon-minus"></i></button>
    </td>
</tr>

Select allOpen in new window