JS modal не работает над каждой строкой

Question

Я не могу понять, почему мой javascript не работает над каждой строкой таблицы.

код Таблица:

<table class="table"> 
    <tr> 
    {# sorting of properties based on query components #} 
    <th{% if pagination.isSorted('a.tytul') %} class="sorted" {% endif %}>{{ knp_pagination_sortable(pagination, 'Tytuł', 'a.tytul') }}</th> 
     <th>{{ knp_pagination_sortable(pagination, 'Kategoria', 'a.kategoria') }}</th> 
     <th>{{ knp_pagination_sortable(pagination, 'Cena ^', 'a.cena', {'direction': 'asc'})}}{{ knp_pagination_sortable(pagination, 'v', 'a.cena', {'direction': 'desc'})}}</th> 
    </tr> 

    {# table body #} {% for oferta in pagination %} 
    <tr {% if loop.index is odd %}class="color" {% endif %}> 
    <td><a href="{{ path('_oferta', {'idOferty' : oferta.idOferty}) }}"> {{ oferta.tytul }}</a> 
    </td> 
    <td>{{ oferta.kategoria }}</td> 
    <td>{{ oferta.cena }}zł/miesiąc</td> 
    <td> 
     <div class="dropdown"> 
     <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Opcje <span class="caret"></span> 
     </button> 
     <ul class="dropdown-menu"> 
      <li><a href="#"><span class="glyphicon glyphicon-wrench"></span> Zmień</a> 
      </li> 
      <li class="divider"></li> 
      <li><a href="#" id="confirm"><span class="glyphicon glyphicon-trash"></span> Usuń</a> 
      </li> 
     </ul> 
     </div> 
    </td> 
    </tr> 
    {% endfor %} 
</table> 
{# display navigation #} 
<div class="navigation col-sm-offset-11"> 
    {{ knp_pagination_render(pagination) }} 
</div> 

И JavaScript:

<script> 
    $(document).ready(function(){ 
     $("#confirm").click(function(){ 
      $("#myModal").modal(); 
     }); 
    }); 
</script> 

Что я пропускаю?

Answer 1

Когда вы ссылаетесь на элемент по ID, вы возвращаете только 1-й объект, который соответствует.

Если вы хотите настроить таргетинг на все элементы с идентификатором «подтвердить», хотя вы, вероятно, должны добавить другой селектор, вы можете использовать селектор атрибутов.

Ваш пример: (только первый пункт работает)

https://jsfiddle.net/SeanWessell/y7cg56bj/

$(document).ready(function(){ 
    $("[id='confirm']").click(function(){ 
     $("#myModal").modal(); 
    }); 
}); 

пример селектора атрибутов:

https://jsfiddle.net/SeanWessell/k8uqvd16/

https://api.jquery.com/attribute-equals-selector/

OR Поскольку вы знаете, что есть родительский элемент tr, вы можете добавить tr в селектор перед идентификатором, и он проверит каждый tr и найдет 1-й элемент с подтверждением id.

$("tr #confirm").click(function(){ 
    $("#myModal").modal(); 
});