模态仅在循环中工作一次

Question

I've been working on a Library Management Sys in PHP. It has a page (collect_fine.php) where I've been calling all the fields related to the each & every member from the DB in a loop.

Along with all the records, I'm also echoing a button to activate a modal on getting click.

The code is as below -

do{?>

<?php
$br_id = $row['Member_id'];
?>
  <tr>
  <td style="outline:1px dotted #000000" height="auto"  width="80px" align="center"><?php echo $row['Member_id']?></td>
  <?php
    $mem_id = $row['Member_id'];  
  ?>
  <td style="outline:1px dotted #000000" height="auto"  width="340px" align="justify">&nbsp;&nbsp;&nbsp;<?php echo $row["Member_name"]?></td>  
  <td style="outline:1px dotted #000000" height="auto"  width="130px" align="center"><?php echo $row['Class']?></td>
  <td style="outline:1px dotted #000000" height="auto"  width="150px" align="center"><?php echo $row['Contact']?></td>
  <td style="outline:1px dotted #000000" height="auto"  width="120px" align="center"><?php
  $count=mysqli_query($conn,"SELECT COUNT(Book_id) AS total_things FROM issued_books WHERE Borrower_id = '$br_id' AND Date_returned = '0'");
  $cnt = mysqli_fetch_array($count,MYSQL_ASSOC);
  $num_results = $cnt["total_things"];
  echo $num_results;
?></td>
  <td style="outline:1px dotted #000000" height="auto"  width="80" align="center"><?php echo $row['Fine_Amt']?></td>
  <td style="outline:1px dotted #000000" width="120px" align="center">
 <?php
 date_default_timezone_set('Asia/Kolkata');
 $date = date('Y-m-d H:i:s');
 if($row['Fine_Amt']>0)
 {
 echo '<style>

@media screen {
    #printSection {
        display: none;
    }
}
@media print {
    body * {
        visibility:hidden;
    }
    #printSection, #printSection * {
        visibility:visible;
    }
    #printSection {
        position:absolute;
        left:0;
        top:0;
    }
}

.modal {
    display: none;
    position: fixed;
    z-index: 1;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
}

.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
}

.close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}
</style>
<button id="myBtn">Collect Fine</button>

<div id="myModal" class="modal">

  <div class="modal-content">
    <span class="close">&times;</span>';
    echo '<p><h1>NTHS eLibrary</h1></br>
    <h2>Fine Reciept of '.$row['Member_name'].'</h2></br>
    <div align="center">';

    ?>
<script>
var modal = document.getElementById("myModal");
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
    modal.style.display = "block";
}
span.onclick = function() {
    modal.style.display = "none";
}
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}
<?php }while($row=mysqli_fetch_array($Result));?>

The above code works perfectly fine but only for the top row :(

What could possibly the reasons for this. Please help

Answer 1

In HTML, 'id' attribute should be unique. You are trying to set same 'id' to all buttons. Try to set button id dynamically.