How to create a button in every row of a table that opens a different modal(with dynamic id) php

Question

I'm new to php and I'm trying to make a theatrical school management app. I have a section that I create a table with all students of a project and I want every row in the table to have a button that opens a modal with all project weeks and a checkbox to check those that payed the weekly cost. I tried to make it work with the code bellow but only the last record opens the modal. The previews records doesn't do anything. If I add another record in the table only the new record opens the modal. Please help!

My code:

<tbody id="firstClass">
            <?php
                
                if( mysqli_num_rows($result) > 0){

                    // we have data
                    // output the data

                    while( $row = mysqli_fetch_assoc($result) ) {

                        $id = $row["id"];
                        /* print_r($id); */
                        
                        echo "<tr>";

                        echo "<td>" . $row['id'] . "</td><td>" . $row['firstname'] . "</td><td>" . $row['lastname'] . "</td><td>" . $row['Age'] . "</td><td>" . $row['email'] . "</td><td>"  . $row['phone'] . "</td><td>" . $row['sign_date'] ."</td>";

                        echo '<td><button type="button" class="btn btn-warning btn-sm" data-bs-toggle="modal" data-bs-target="#payments-' . $id . '">
                        <i class="fas fa-euro-sign"></i>
                        </button></td>';

                        echo '<td><a href="edit_student.php?id=' . $row['id'] .'" type="button" class="btn btn-primary btn-sm">
                        <i class="far fa-edit"></i>
                        </a></td>';

                        echo '<td><a href="delete_student.php?id=' . $row['id'] .'" type="button" class="btn btn-danger btn-sm delete">
                        <i class="fas fa-trash-alt"></i>
                        </a></td>';

                        echo "</tr>";

                        
                        
                    }
                } else {// if no entries
                    echo "<div class='alert alert-warning'>Δεν έχετε εγγραφές!</div>";

                }

            

                // mysqli_close($conn);
            ?>

            <tr>
                <td colspan="11"><div class="text-center"><a href="addStudent.php" type="button" class="btn btn-sm btn-success"><i class="fas fa-plus"></i> Προσθήκη εγγραφής</a></div></td>
            </tr>
            </tbody>
        </table>
    </div>



</div>

<!-- Modal -->

 <div class="modal fade" id="payments-<?php echo $id; ?>" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Πληρωμή</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <!-- <?php echo $id ;?> -->
      <div class="table-responsive">
        <table class="table" id='myTable'>
            <thead>
                
                <tr>
                    <th class="table-cell text-center" scope="col">Week 1</th>
                    <th class="table-cell text-center" scope="col">Week 2</th>
                    <th class="table-cell text-center" scope="col">Week 3</th>
                    <th class="table-cell text-center" scope="col">Week 4</th>
                    <th class="table-cell text-center" scope="col">Week 5</th>
                    <th class="table-cell text-center" scope="col">Week 6</th>
                    <th class="table-cell text-center" scope="col">Week 7</th>
                    <th class="table-cell text-center" scope="col">Week 8</th>
                
                </tr>
            </thead>
            <tbody>
                <td class="text-center"><input type="checkbox"></td>
                <td class="text-center"><input type="checkbox"></td>
                <td class="text-center"><input type="checkbox"></td>
                <td class="text-center"><input type="checkbox"></td>
                <td class="text-center"><input type="checkbox"></td>
                <td class="text-center"><input type="checkbox"></td>
                <td class="text-center"><input type="checkbox"></td>
                <td class="text-center"><input type="checkbox"></td>

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

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div> 




<?php

include('includes/footer.php');

?>

Answer 1

You've to write your modal into the WHILE loop too that you are using for fetching data to add an individual modal for each row. Otherwise only the last id will find the modal. Format your code like this:

<?php
    if (mysqli_num_rows($result) > 0) {
        while ($row = mysqli_fetch_assoc($result)) {
            $id = $row["id"];
    ?>
            <tr>
                <td><?= $id ?></td> //<?= ?> is the short form of <?php echo '' ?>
                .................
            </tr>
            
           <!-- Modal -->

          <div class="modal fade" id="payments-<?php echo $id; ?>" tabindex="-1" 
          aria-labelledby="exampleModalLabel" aria-hidden="true"> 
          ..................
          </div>                 

        <?php }
    } else { ?>
          .............
    <?php } ?> 

Answer 2

I just went through your question and your code. As far as I can understand you want your modal to display the details of a particular student's payment records on which a user clicks.

Unfortunately, you have used a loop inside which you have defined a variable $id and the value of $id gets changed every time the loop iterates. So, in the end, $id holds the value of the very last record from the database.

As per your code, the generated HTML structure would be something like this(considering the record of five students):

<tbody>
    <tr>
        <td><button type="button" data-bs-toggle="modal" data-bs-target="#payments-1">xyz</button></td>
    </tr>
    <tr>
        <td><button type="button" data-bs-toggle="modal" data-bs-target="#payments-2">xyz</button></td>
    </tr>
    <tr>
        <td><button type="button" data-bs-toggle="modal" data-bs-target="#payments-3">xyz</button></td>
    </tr>
    <tr>
        <td><button type="button" data-bs-toggle="modal" data-bs-target="#payments-4">xyz</button></td>
    </tr>
    <tr>
        <td><button type="button" data-bs-toggle="modal" data-bs-target="#payments-5">xyz</button></td>
    </tr>                
</tbody>

<div class="modal fade" id="payments-5">
    .....
</div>

Here modal will get the id as 5 just because $id will hold the value of the last record. As the id from the last row of the table matches with the id of the modal, the modal only opens up from the last row.

So, this was the problem with the code. Hope you have understood what was wrong with your code. Now let's come to the solution part of this.

For this, I would recommend you to open the modal using jquery. Where you'll open the modal using a class selector and pass student_id in the modal using the data attributes.

Sharing a snippet for better help.

 $('.open-modal').on('click', function() { var student_id = $(this).data('student_id'); $('#student_id').val(student_id); $('.modal').modal('toggle'); })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> <table> <tbody> <tr> <td><button type="button" class="open-modal" data-student_id='1'>Student 1</button></td> </tr> <tr> <td><button type="button" class="open-modal" data-student_id='2'>Student 2</button></td> </tr> <tr> <td><button type="button" class="open-modal" data-student_id='3'>Student 3</button></td> </tr> </tbody> </table> <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-body"> <form> <:–– form to be used for saving the data with student id as hidden input --> Student ID: <input type="text" id="student_id"> </form> </div> </div> </div> </div>

This will let you create only one modal for n number of students.