Modal working only once in loop - php

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"> <?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">×</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.