Как запустить модальное окно Javascript в цикле?

Итак, у меня есть это всплывающее модальное окно:

HTML:

<h2>Пример модального окна</h2>

<!-- Триггер/Открыть модальное окно -->
<button id="myBtn">Открыть модальное окно</button>

<!-- Модальное окно -->
<div id="myModal" class="modal">

  <!-- Содержимое модального окна -->
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>Некоторый текст в модальном окне..</p>
  </div>

</div>

Скрипт:

<script>
// Получить модальное окно
var modal = document.getElementById("myModal");

// Получить кнопку, которая открывает модальное окно
var btn = document.getElementById("myBtn");

// Получить элемент <span>, который закрывает модальное окно
var span = document.getElementsByClassName("close")[0];

// Когда пользователь нажимает на кнопку, открыть модальное окно 
btn.onclick = function() {
  modal.style.display = "block";
}

// Когда пользователь нажимает на <span> (x), закрыть модальное окно
span.onclick = function() {
  modal.style.display = "none";
}

// Когда пользователь нажимает в любое место за пределами модального окна, закрыть его
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
</script>

Я пытаюсь вставить цикл для каждого поста.

Он работает на первом посте, но не всплывает для остальных.

Я попытался вынести скрипт за пределы цикла, та же самая ситуация… работает для первого поста, но не для остальных.

Думаю, конфликт возникает из-за имен.

Можно ли сделать так, чтобы это работало в цикле для каждого поста?

Любая помощь будет оценена.

ИЗМЕНЕНИЕ: Я попытался добавить <?php $postid = get_the_ID(); echo $postid; ?>, чтобы я мог задать уникальный id для каждого случая в цикле.

Но это не сработало (даже для первого поста).

Думаю, PHP не исполнился в некоторых частях скрипта.

Мне действительно нужна помощь, как это решить?

Решение с использованием всплывающего окна без JavaScript:

Добавил <?php $postid = get_the_ID(); echo $postid; ?> в HTML, чтобы он действовал как уникальный id для каждого поста в цикле.

HTML:

<a href="#openModal<?php $postid = get_the_ID(); echo $postid; ?>">Открыть модальное окно</a>

<div id="openModal<?php $postid = get_the_ID(); echo $postid; ?>" class="modalDialog">
  <div>
    <a href="#close" title="Close" class="close">X</a>
    <h2>Всплывающее окно</h2>
    <p>Это красивая всплывашка, работающая только с CSS3.</p>
  </div>
</div>

CSS:

.modalDialog {
  position: fixed;
  font-family: Arial, Helvetica, sans-serif;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 99999;
  opacity: 0;
  -webkit-transition: opacity 400ms ease-in;
  -moz-transition: opacity 400ms ease-in;
  transition: opacity 400ms ease-in;
  pointer-events: none;
}
.modalDialog:target {
  opacity: 1;
  pointer-events: auto;
}
.modalDialog > div {
  width: 400px;
  position: relative;
  margin: 10% auto;
  padding: 5px 20px 13px 20px;
  border-radius: 10px;
  background: #fff;
  background: -moz-linear-gradient(#fff, #999);
  background: -webkit-linear-gradient(#fff, #999);
  background: -o-linear-gradient(#fff, #999);
}
.close {
  background: #606061;
  color: #FFFFFF;
  line-height: 25px;
  position: absolute;
  right: -12px;
  text-align: center;
  top: -10px;
  width: 24px;
  text-decoration: none;
  font-weight: bold;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
  -moz-box-shadow: 1px 1px 3px #000;
  -webkit-box-shadow: 1px 1px 3px #000;
  box-shadow: 1px 1px 3px #000;
}
.close:hover {
  background: #00d9ff;
}