bootstrap modal problems delete data

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">&times;</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">
            <a href="../delete/delete_reg.php?id=<?php echo $dados['idemployee'];?>" type="button" class="btn btn-primary">Apagar</a>
            <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:

1. 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)

2. 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.