Javascript 如何使用PHP while语句迭代将触发模式弹出窗口的按钮

我有一个使用PHP从mysql数据库获取用户数据的系统。“while”语句显示来自数据库表的结果。我希望能够为数据库中的每个用户添加一项技能。我有一个按钮，当点击时，会触发一个带有用户名和id的模式弹出窗口。我无法获得迭代按钮来触发模式弹出窗口。只有第一排的按钮有效。（请原谅我的英语）。如何让所有按钮触发显示相应用户名和id的模式弹出表单

Html和PHP

  <table id="proj" border="0" width = "85%">
  <tr >
    <td width = "30%" align = "center">User ID</td>
    <td  width = "30%" align = "center">Name</td>
    <td align = "center">Actions</td>
  </tr>
</table>
<!--rows containing stuff from database-->
<?php

include 'dbcon.php';
$sql = "SELECT * FROM users";
$result = $con->query($sql);
if ($result->num_rows > 0) {
    // output data of each row
    while($row = $result->fetch_assoc()) {
?>
    <div class="prows">
      <div class="prow" align = "center">
        <div class="id1">
          <?php echo $row["id"]; ?>
        </div>
        <div class="status1">
          <?php  echo $row["name"]; ?>
        </div>
      <div class="pm1">
        <button id="bnUpdt">Add Skill</button>
      </div>
    </div>
  </div>

  <!-- The Modal -->
  <div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <div class="modal-header">
      <span class="close">&times;</span>
      <h2 style="display:inline-block; margin-right:100px;">Name: <?php  echo $row["name"]; ?></h2>
      <p style="display:inline-block;margin-right:100px;">User ID: <?php echo $row["id"]; ?></p>
    </div>
    <form action="update.php" method="post" class="modal-body" align="center">
      <div class="task" >
        <input type="text" name="task" >
        <button type="submit" name="button"> Add</button>
      </div>
    </form>
  </div>
</div>
   <?php
  }
}
?>

用户ID
名称
行动
增加技能
&时代；
姓名：
用户ID:

添加

Javascript

<script>
    // Get the modal
    var modal = document.getElementById("myModal");

    // Get the button that opens the modal
    var btn = document.getElementById("bnUpdt");

    // Get the <span> element that closes the modal
    var span = document.getElementsByClassName("close")[0];

    // When the user clicks the button, open the modal
    btn.onclick = function() {
        modal.style.display = "block";
    }

    // When the user clicks on <span> (x), close the modal
    span.onclick = function() {
        modal.style.display = "none";
    }

    // When the user clicks anywhere outside of the modal, close it
    window.onclick = function(event) {
        if (event.target == modal) {
            modal.style.display = "none";
        }
    }
</script>

//获取模态
var modal=document.getElementById（“myModal”）；
//获取打开模式对话框的按钮
var btn=document.getElementById（“bnUpdt”）；
//获取关闭模态的元素
var span=document.getElementsByClassName（“关闭”）[0]；
//当用户单击该按钮时，打开模式对话框
btn.onclick=函数（）{
modal.style.display=“块”；
}
//当用户单击（x）时，关闭模式对话框
span.onclick=函数（）{
modal.style.display=“无”；
}
//当用户单击模式之外的任何位置时，将其关闭
window.onclick=函数（事件）{
如果（event.target==模态）{
modal.style.display=“无”；
}
}

CSS

.pm1、.id1、.status1{
显示：内联块；
宽度：33%；
}
#选择{
显示：内联块；
宽度：10%；
}
.船头{
宽度：80%；
}
船头先生{
背景色：#d9d9d9；
填充：10px；
边框顶部：1px实心#ededed；
颜色：#4242；
}
.船头：悬停{
背景色：#e3c7a8；
}
/*模态（背景）*/
.莫代尔{
显示：无；/*默认情况下隐藏*/
位置：固定；/*保持原位*/
z指数：1；/*位于顶部*/
填充顶部：100px；/*框的位置*/
左：0；
排名：0；
宽度：100%；/*全宽*/
高度：100%；/*全高*/
溢出：自动；/*根据需要启用滚动*/
背景色：rgb（0,0,0）；/*回退色*/
背景色：rgba（0,0,0,0.4）；/*黑色w/不透明度*/
}
/*模态内容*/
.模态内容{
位置：相对位置；
背景色：#fefe；
保证金：自动；
填充：0；
边框：1px实心#888；
宽度：50%；
盒影：0 4px 8px 0 rgba（0,0,0,0.2），0 6px 20px 0 rgba（0,0,0,0.19）；
-webkit动画名称：animatetop；
-webkit动画持续时间：0.4s；
动画名称：animatetop；
动画持续时间：0.4s
}
/*添加动画*/
@-webkit关键帧动画顶点{
从{top:-300px；不透明度：0}
到{顶部：0；不透明度：1}
}
@关键帧动画顶点{
从{top:-300px；不透明度：0}
到{顶部：0；不透明度：1}
}
/*关闭按钮*/
.结束{
颜色：白色；
浮动：对；
字号：28px；
字体大小：粗体；
}
.关闭：悬停，
.结束：聚焦{
颜色：#000；
文字装饰：无；
光标：指针；
}
.模态标题{
填充：2x16px；
背景色：#42350f；
颜色：白色；
}
.modal body{padding:20px；}

---

我想让每行中的每个按钮触发一个模式弹出窗口

，正如ryantxr所解释的，不能有多个同名ID。添加一个类名，然后遍历它们。也许是这样的？假设您已将class=“bUpdate”添加到必要的元素中

var elem = document.getElementsByClassName('bnUpdt');
for(var i=0; i<elem.length; i++) {
  elem[i].addEventListener("click", function() {
        // add skill code...
  });
}

var elem=document.getElementsByClassName（'bnUpdt'）；
对于（var i=0；我认为不能有多个具有相同id的html项。
var elem = document.getElementsByClassName('bnUpdt');
for(var i=0; i<elem.length; i++) {
  elem[i].addEventListener("click", function() {
        // add skill code...
  });
}