Javascript 无法打开循环中包含按钮的CSS模式

我使用javascript和HTML中的代码在CSS中创建了一个简单的模式。 触发按钮处于循环中，循环重复多次。第一次出现的触发按钮工作正常，模式显示，但其余内容不显示

以下是我尝试过的代码：

while($query->have_posts()) : $query->the_post(){
  <!-- some html here-->
   <div class=" pull-left hs-book-now-button">
        <button id="myBtn">Book Now</button>     
    </div>
}

---

不能有多个元素具有相同的

id

，因此，如果循环打算创建多个按钮，并附加唯一的单击处理程序，则无法工作。按钮必须具有唯一的

id

值，然后您必须找出如何将相应的单击处理程序附加到每个按钮。因此，您可以建议其他方法吗？我想不出来。你可以将按钮更改为

Book Now

到

Book Now

，然后再更改

var btn=document.getElementById（“myBtn”）变成
var btn=document.getElementsByClassName（“myBtn”）你知道如何将活动元素的内容放入模态中吗？我已经尝试过将id更改为类。但它甚至不适用于第一次出现的button@AsadUllah您是否将btn更改为btn=GetElementsByCassName（“myBtn”），现在所有内容都应该存储到该类的元素数组中，您可以使用btn[0]btn[1]或任何需要的内容访问它
<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>'modal content here'</p>
  </div>

</div>

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";
    }
}