Невозможно использовать один модальный с несколькими кнопками

Question

Я работаю на веб-странице, где у меня есть таблица, заполненная JSON.

На правой стороне стола я три (3) вызов к кнопкам действий, как показано на рисунке ниже:

При нажатии на кнопку «ВИС» в первой строке , он открывает свой соответствующий модальный.

Однако, когда я нажимаю на последующие кнопки «vis» (вторая строка вниз), ничего не происходит.

Ниже мой код (PHP цикл так, чтобы добавить больше строк в зависимости от имеющихся данных из MySql БД):

<tr> 
    <td><? echo $row['filename']; ?></td> 
    <td><? echo $row['cat']; ?></td> 
    <td><? echo $row['size']; ?></td> 
    <td><? echo $row['usr']; ?></td> 
    <td><? echo $row['date']; ?></td> 
    <td width="18%"> 
     <a href="#" class="btn btn-primary" id="openItem" data-toggle="modal" href="#show-dialog" onclick="window.location.hash = '<? echo $row['id'];?>';">Vis</a> 
     <a href="#" class="btn btn-success" id="downloadItem" download="">Last ned</a> 
     <a href="#" class="btn btn-danger" id="deleteItem" data-toggle="modal" href="#error-dialog" onclick="window.location.hash = '1';">Slett</a> 
    </td> 
</tr> 

Мой модальный (HTML код):

<div class="modal fade" id="show-dialog" style="height: auto; max-height: 500px;"> 
     <div class="modal-header"> 
      <a class="close" data-dismiss="modal">x</a> 
      <h3>video_raw01.raw</h3> 
     </div> 
     <div class="modal-body"> 
      <video width="100%" controls> 
       <source src="mov_bbb.mp4" type="video/mp4"> 
       <source src="mov_bbb.ogg" type="video/ogg"> 
       Your browser does not support HTML5 video. 
      </video> <br> 
      <table> 
       <tr> 
        <td><a href="#">url:path/to/video/raw</a></td> 
       </tr> 
      </table> 

     </div> 
     <div class="modal-footer" style="position: absolute; bottom: 0; float: right; width: 100%;"> 
      <a href="#" class="btn btn-success btn-modal btn-cancel" data-dismiss="modal">Last ned</a> 
      <a href="#" class="btn" data-dismiss="modal">Lukk</a> 
     </div> 
    </div> 

И мой код JavaScript (с использованием библиотеки jQuery):

<script> 
    $(document).ready(function(){ 

     $("#openItem").on("click", function(){ $("#show-dialog").modal();}); 
     $("#deleteItem").on("click", function(){ $("#error-dialog").modal();}); 
     $('#show-dialog').on('show.bs.modal', function(e) { 
      var hash = window.location.hash; 
      console.log("LOG: "+hash); 

     }); 
</script> 

Есть ли причина, по которой действия кликов на последующих кнопках строки не будут открывать соответствующие соответствующие модалы?

Answer 1

TL; DR

Есть ли причина, почему нажмите действия на последующие кнопки строки не будут открывать соответствующие соответствующие модальности?

Да; потому что id s ДОЛЖНО быть уникальным.

В случае нескольких вхождений одного и того же id(которые не должны быть), только самый первый из них будет использоваться и доступны для манипуляций.

---

Используйте классы вместо идентификатора для ее решения, как в: class="openItem" вместо id="openItem".

Впоследствии сценарии должны быть отредактированы, а также ссылаться на соответствующие модальности, как, например, как захваченный ниже:

<script> 
    $(document).ready(function(){ 

     $(".openItem").on("click", function(){ $("#show-dialog").modal();}); 
     $(".deleteItem").on("click", function(){ $("#error-dialog").modal();}); 
     $('.show-dialog').on('show.bs.modal', function(e) { 
      var hash = window.location.hash; 
      console.log("LOG: "+hash); 

     }); 
</script> 

Взгляните на эту answer и дальше, this one too для хорошего понимания о различии между class и id так, чтобы понять характер проблемы вы столкнулись: только первое вхождение в ид получает пострадавших.