php - Bootstrap modal confirmation delete -

hello guys i'm trying delete record/row table using modal delete confirmation. i've tried far:

<script type="text/javascript"> $(function(){ $(".btn-show-modal").click(function(e){   e.preventdefault();   $("#dialog-example").modal('show'); });  $("#btn-delete").click(function(e) {   $("#dialog-example").modal('hide'); });  }); </script>           <table class="table table-bordered">                     <?php                     $stmt2 = $conn->prepare( "select project_code, description                           tblprojects" );                     $stmt2->execute();                      for($i=0; $row2 = $stmt2->fetch(); $i++){                        $project = $row2['project_code'];                        $desc = $row2['description'];                     ?>                 <tr>                     <td><a href="project-detail.php?code=<?php echo $project; ?>">                         <?php echo $project; ?></a></td>                     <td><?php echo $desc; ?></td>                     <td><a href="update-project.php?code=<?php echo $project; ?>" title="update record">                         <i class="icon-edit icon-white">                         </i>                     </a></td>                     <td><a href="#<?php echo $project; ?>"                   id="<?php echo $project; ?>"                   data-id="<?php echo $project; ?>"                   class="btn-show-modal" data-toggle="modal" title="delete record">                   <i class="icon-trash icon-white"></i></a></td>                    <div class="modal hide fade" id="dialog-example">                       <div class="modal-header">                         <h5>confirm delete</h5>                       </div>                       <div class="modal-body">                         <p class="modaltext">are sure want delete record?</p>                       </div>                            <div class="modal-footer">                         <a href="#" data-dismiss="modal" class="btn btn-info">no<a>                         <a href="delete-project.php?code=<?php echo $project; ?>"                            class="btn btn-danger" id="btn-delete">yes<a>                       </div>                   </div>                </tr>                     <?php                      }                      ?>             </table> 

but problem is, when delete last row 1 gets deleted first row. why that? ideas? appreciated. thanks.

the problem lies in modal generation , passing $project value.

you using loop

for($i=0; $row2 = $stmt2->fetch(); $i++){                        $project = $row2['project_code'];                        $desc = $row2['description'];                     ?> 

and inside above loop generating modals have many modals equal num of rows in query.

now of them having same "id" i.e. "dialog-example" , once click on delete pop ups first modal dom , deleting wrong data.

solution each modal give id as

<div class="modal hide fade" id="dialog-example_<?php echo $project; ?>"> 

then in blow code

$(".btn-show-modal").click(function(e){   e.preventdefault();   $("#dialog-example").modal('show'); }); 

get id of element using attr("id") , append @ end of

"dialog-example_"+{id received}  

the same thing need hide modal well.

update on how 

give modal div id as

<div class="modal hide fade" id="dialog-example_<?php echo $project; ?>"> 

then in click function as

$(".btn-show-modal").click(function(e){ e.preventdefault(); var id = $(this).attr('id'); var modal_id = "dialog-example_"+id; $("#"+modal_id).modal('show'); });

change

<a href="delete-project.php?code=<?php echo $project; ?>"                            class="btn btn-danger" id="btn-delete">yes<a> 

to

<a href="delete-project.php?code=<?php echo $project; ?>"                            class="btn btn-danger" id="<?php echo $project ;?>">yes<a> 

and finally

    $("#btn-delete").click(function(e) {   $("#dialog-example").modal('hide'); }); 

to

$(".btn btn-danger").click(function(e) {   var id = $(this).attr('id');   var modal_id = "dialog-example_"+id;   $("#"+modal_id).modal('hide'); });