Возможно ли иметь модальную кнопку внутри foreach l oop?

Question

У меня есть модальная кнопка внутри foreach l oop со строками из базы данных, но я могу нажать только первую кнопку, потому что она имеет одинаковое значение для каждого l oop. Я пытался использовать увеличивающееся значение идентификатора $i=0, $i++, но не могу заставить его работать.

foreach($pdo->query("SELECT * FROM operation, OPuppgift where skift='natt' and klar='0' and operation.NR=OPuppgift.NR") as $row){
  $i++;
  echo "<tr>";
  echo "<td>".$row['NR']."</td>";
  echo "<td>".$row['kort_Uppgift']."
  </br>
    <button id=".$i." class='myBtn'>?</button>
    <div id=".$i." class='modal'>
      <div class='modal-content'>
        <span class='close'>&times;</span>
        <p>".$row['uppgift']."</p>
          <script type='text/javascript' src='modalJ.js'></script>
      </div>
    </div>
  </td>";

var modal = document.getElementById("1");
var btn = document.getElementById("1");
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';
    }
};

Answer 1

Не используйте один и тот же идентификатор для нескольких объектов. Ваши элементы div и кнопки имеют одинаковый идентификатор и также не указаны в кавычках.

Измените это:

</br>
    <button id=".$i." class='myBtn'>?</button>
    <div id=".$i." class='modal'>

на это или что-то подобное:

 </br>
    <button id='button".$i."' class='myBtn'>?</button>
    <div id='div".$i."' class='modal'>

Обратите внимание, я добавляю номер идентификатора с дескриптором, чтобы различать кнопки и div, а затем используя одну и ту же инкрементную переменную, чтобы каждая пара получала одинаковое число после дескриптора (например, div1 идет с button1, et c).

Вы также не заключаете идентификаторы в кавычки. Я заключаю их в одинарные кавычки в моем примере ревизии выше. Изменение будет генерировать HTML вывод, как это.

 </br>
    <button id='button1' class='myBtn'>?</button>
    <div id='div1' class='modal'>
...
 </br>
    <button id='button2' class='myBtn'>?</button>
    <div id='div2' class='modal'>

В вашем коде Javascript (спасибо @kerbholz) измените идентификаторы в соответствии. Я бы сделал это программно (вы используете в своем коде значение stati c), но конечный результат должен заключаться в следующем обозначении вашего указателя (но через код, который использует правильное число).

var modal = document.getElementById("div1");
var btn = document.getElementById("button1");

Вы не передаете номер идентификатора вашему скрипту. Вы можете использовать «this» или передать значения, или другие методы, поэтому ваша кнопка управляет правильными двумя элементами.