bootstrap modal problems delete data - php

Question

i'm trying to delete a row from my table using a bootstrap modal delete confirmation.
But the problem is, when i try to delete the one row mon my table, the one that gets deleted is the first row(always). Why is this happen? Any ideas?
HTML(table)
<table class="table table-bordered table-hover clearfix" id="example">
<thead>
<tr>
<th>ID de Funcionário</th>
<th>Sobrenome</th>
<th>Nome</th>
<th>Cargo</th>
<th>Telefone</th>
<th class="text-center">Opção</th>
</tr>
</thead>
<tbody>
<?php
$query="SELECT * FROM employee AS E ORDER BY name";
$res = mysql_query($query);
mysql_set_charset('utf-8');
if(!$res){
echo "Erro ao executar a query";
}
else{
while($dados=mysql_fetch_array($res)){
?>
<tr>
<td><?php echo $dados['func_id']; ?></td>
<td><?php echo $dados['last_name']; ?></td>
<td><?php echo $dados['name']; ?></td>
<td><?php echo $dados['position']; ?></td>
<td><?php echo $dados['phone']; ?></td>
<td class="text-center">
<a class="btn btn-danger btn-xs" data-toggle="modal" data-target="#delete" data-whatever="#mdo">
<span class="fa fa-trash">Apagar</span>
</a>
<?php include('modal_delete.php');?>
</td>
</tr>
<?php
}}
?>
</tbody>
Modal_delete.php(include)
<div class="modal" id="delete" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog">
<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>
<h4 class="modal-title text-left">Apagar</h4>
</div>
<div class="modal-body text-left">
<p>Deseja apagar este registro?</p>
</div>
<div class="modal-footer">
Apagar
<a type="button" class="btn btn-default" data-dismiss="modal">Cancelar</a>
</div>
</div>
</div>
Delete_reg.php
<?php
require("../../conection/conection.php");
$id =$_GET["id"];
$query= "DELETE FROM employee WHERE idemployee= $id";
$delete= mysql_query($query);
if(!$delete){
echo "erro!! não foi possivel apagar dado.";
}
else{
echo"Dado removido com sucesso!";
header("Location: ../list/list_reg.php");
}?>
All the possible solution that i found on the website don't solve my problem... can someone please help me? Thank you!!!

Answer 1

Say you have 5 rows. That means for each row, you generate a modal. Each of these 5 modals has id="delete". When you click on the link to open the modal, the bootstrap code opens up the first modal that matches $('#delete'), which means it will delete the first row.
You have two solutions:
You add in the echo $dados['idemployee']; in the delete button's data-target, and in the modal's id. (Not optimal, because you're still generating a modal's worth of code per table row)
You make only 1 modal, and add a click() event to the delete button, which updates the Apagar button's href with the proper id.