php - Multiple Bootstrap modals, only the first opens

Question

I have a site with database. I create an HTML table with the content from database with success. Now I want each element in the table to be an anchor and open a modal with the information in the database for the element I clicked.

It's working, the only problem is that only the first modal will open no matter which element is clicked. If I click on the 3rd element, it will show the information on the first.

In the image, I click on Mike, and it shows me William Soares(first)

<div class="col-sm-4"><div class="table-responsive" style="margin: 1%">
                <h3 style="color: white; font-weight: bold; font-style:italic;">Defesas</h3>
                <table class="table table-dark">
                     <thead>
                        <tr>
                          <th>Numero</th>
                          <th>Nome</th>
                        </tr>
                      </thead>
                      <tbody>

            <?php 
                    $sql = 'SELECT * FROM jogadores ORDER BY id ASC LIMIT 32';
                    $stmt = $dbh->prepare( $sql );
                    $stmt->execute();

                    if( $stmt && $stmt->rowCount() > 0)
                    {   
                    while( $obj = $stmt->fetchObject() )
                    {       if ($obj->posicao == "Defesa") {

            ?>
                        <tr>
                          <th><?php echo $obj->numero_camisola ?></th>
                          <td><a href="#modalJog" data-target="#modalJog" data-toggle="modal">
                            <?php echo $obj->nome ?></a>

                            <div id="modalJog" class="modal fade" role="dialog" >
                                <div class="modal-dialog">
                                    <div class="modal-content" style="background-color: black;">
                                        <div class="modal-header">
                                            <h5 class="modal-title"><?php echo $obj ->nome ?></h5>
                                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                                        </div>
                                        <div class="modal-body">
                                            <p><?php echo $obj ->nomeCompleto?></p>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                        </div>
                                    </div>
                                </div>
                              </div>
                          </td>
                        </tr>

                      </tbody>
            <?php 

                }   
            }
        }
                else
                    echo 'N?o existem jogos disponíveis.';
            ?>  


                </table>
            </div></div>
</div> 

https://ibb.co/r0DbwnF https://ibb.co/tcQpNWy

Answer 1

You are telling your links to open a modal from an element with a specific id. That's what data-target="#modalJog" does. You are then giving each of your containers the same id, by virtue of executing the same code within a loop. HTML elements should have unique ids (or none at all). Otherwise, only the first element with the repeated id will be recognized.

I don't know if your database table has some unique ID column (hopefully it does), but if it does, you can use that to make your element ids unique. For example, you would do something like data-target="#modalJog<?php echo $obj->id; ?>" and <div id="modalJog<?php echo $obj->id; ?>".

If you don't have an ID column in your table, then leave the id off your container divs and use data-target="a:focus+div" on your links. This will target the next-sibling div element within the DOM relative to whatever a element has focus (which would be the one being clicked).