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

Question

我使用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>
}

模态html是：

<div id="myModal" class="modal">

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

</div>

javascript代码是：

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