模态仅在循环中工作一次

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

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