Boostrap modal only showing first record - asp.net-mvc

Question

I have a modal that appears when a user clicks a delete link on my index page but this is only showing the first record regardless of what row is clicked, i think i'm missing something in the "#data_target" part of my code but unsure.
Code is as follows:
#foreach (var item in Model)
{
using (Html.BeginForm("Delete", "ModelName", new { id = item.ID }))
{
var myModal = "myModal" + item.ID;
<tr>
<td>
#Html.DisplayFor(modelItem => item.Account_Name)
</td>
<td>
#Html.ActionLink("Edit", "Edit", new { id = item.ID }) |
#Html.ActionLink("Details", "Details", new { id = item.ID }) |
#Html.ActionLink("Delete", "Index", new { id = item.ID }, new { #class = "DeleteRecord", #data_target = "myModal" })
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" data-keyboard="false" aria-labelledby="myModalLabel">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<center>
<h4 class="modal-title" id="myModalLabel">Delete Record</h4>
</center>
</div>
<div class="modal-body">
<center>
Record ID :<span><b>#item.ID</b></span><br />
Account Name : <span><b>#item.Account_Name</b></span><br />
</center>
</div>
<div class="modal-footer">
<center>
<button type="button" class="btn btn-primary" data-dismiss="modal">Cancel</button>
<input type="submit" value="Delete" class="btn btn-danger" />
</center>
</div>
</div>
</div>
</div>
</td>
</tr>
}
}
and then the function is
<script>
$(function () {
$('.DeleteRecord').on("click", function (e) {
e.preventDefault();
//perform the url load then
$('#myModal').modal({
keyboard: true
}, 'show');
return false;
})
})

Answer 1

Update you function as below. $(this).closest('td') will select parent td element of clicked .DeleteRecord button. Then it will find #myModal inside that td.
$(document).ready(function () {
$('.DeleteRecord').on("click", function (e) {
e.preventDefault();
//perform the url load then
$(this).closest('td').find('#myModal').modal({
keyboard: true
}, 'show');
return false;
});
});
In your code $('#myModal').modal(...);, this has used id selector which will always give you first element which has myModel id.

Answer 2

It should be data_targer="#myModal"