Ajax confirmation is asking only for one data - php

Question

I have implemented an ajax beforeSend function where there is a confirm(), the problem is that in the code if I want to delete the first value in while it asks for confirm but if I click the second or third or fourth, it just goes to the URL in the method and executes the command
this is the the page
<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Button</th>
</tr>
</thead>
<tbody>
<?php
$stmt = $DB_con->prepare("SELECT * FROM people");
$stmt->execute();
while($row=$stmt->fetch(PDO::FETCH_ASSOC))
{?>
<tr><td><?php echo $row['id']; ?></td>
<td><?php echo $row['name']; ?></td>
<form method="post" id="del" action="delete.php">
<input type='hidden' id='pid' name='pid' value='<?php echo $row['id']; ?>'>
<button id="send" type="submit">Delete</button>
</form>
</th>
</tr>
<?php
}
?>
this is the ajax function
$(document).ready(function (e) {
$("#del").on('submit',(function(e) {
e.preventDefault();
$.ajax({
url: "delete.php",
type: "POST",
data: new FormData(this),
contentType: false,
cache: false,
processData:false,
beforeSend:function(){
return confirm("Are you sure you want to delete this?");
},
success: function(data)
{
alert("Delete Successful");
window.location.reload();
},
error: function(e)
{
}
});
}));
});
whereas it should ask no matter which record I want to delete, it should ask for confirmation.

Answer 1

use classname class="del" instead of id id="del".Each time submit its only execute first form
<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Button</th>
</tr>
</thead>
<tbody>
<?php
$stmt = $DB_con->prepare("SELECT * FROM people");
$stmt->execute();
while($row=$stmt->fetch(PDO::FETCH_ASSOC))
{?>
<tr><td><?php echo $row['id']; ?></td>
<td><?php echo $row['name']; ?></td>
<form method="post" class="del" action="delete.php">
<input type='hidden' class='pid' name='pid' value='<?php echo $row['id']; ?>'>
<button id="send" type="submit">Delete</button>
</form>
</th>
</tr>
<?php
}
?>

Answer 2

Here you create invalid HTML:
while(...)
{
...
'>
Delete
...
}
In every loop-run you create 3 objects with identical id in each run. An ID must not defined multiple times.
Solutions:
Don't use id=and use optional class=.
Append an unique number to id, e.g. id="del-<?php echo $row['id']; ?>"