Php 模式在循环中仅工作一次

我一直在用PHP开发一个库管理系统。 它有一个collect_fine.php页面，我一直在循环中调用数据库中与each&each成员相关的所有字段

除了所有的记录外，我还回显了一个按钮，在点击时激活一个模式

守则如下：

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));?>

上面的代码工作得非常好，但仅适用于最上面一行：

---

原因可能是什么。请帮助

在HTML中，“id”属性应该是唯一的。您正在尝试为所有按钮设置相同的“id”。尝试动态设置按钮id。

是否有理由要在php中回显css样式？id myModal在循环中重复多次。它应该是独一无二的。解决方案：使用一个计数器并将其添加到id的名称中。您的代码易受@eeya攻击，我试图不将样式标记放在php下，但它没有work@KIKO我只能在代码中看到myModal只使用了两次，你还能在哪里看到它？好的，我已经为按钮分配了与成员id相同的id，所有按钮现在都开始工作了，但是modal只显示最上面列出的成员的记录现在，您应该为此行设置动态modal id，并且您需要告诉JS必须为相应的成员显示哪个modal PLZ帮助我设置modal标记的id，我已经尝试了一些选项，但它们不起作用即使尝试更改模式的id，模式框也不会弹出，请帮助我