problem with <th:each> when dynamically generating a table with thymeleaf

[Paulo Maia]

Hi!
I really like popConfirm, however, I'm having a frustrating problem when dynamically generating a table with thymeleaf. Example:

<table id="tableID" class="table">
    <thead>
       <tr>
          <th>Name</th>
	  <th>City</th>
	  <th>Action</th>
       </tr>
    </thead>
    <tbody>
       <tr th:each="user : ${users}">
          <td th:text="${user.name}">
          <td th:text="${user.city}">
          <td>
              <button id="confirmation_delete" class="btn fa fa-trash-o"></button> <!--action not displayed-->
          </td>							
       </tr>
    </tbody>
</table>

I then have my popConfirm code in a javascript file (correctly loaded)

$(document).ready(function() {
	$("#confirmation_delete").popConfirm();		
});

The problem is that when I click the delete button in the first row of the table, the popConfirm is correctly displayed and working, however, for the rest of the table rows, the popConfirm button is not even displayed (the action is immediately triggered).

Can you help solving this problem?

Kind regards,
Paulo Maia

[Pablo Pazos Gutiérrez]

You are using id for all the buttons. An id should be unique. That is not valid HTML.

[Paulo Maia]

It is true, I'm still a newbie at javascript/html and web development. Can you show me an alternative way of doing it? I like popConfirm better but In the meantime, I switched to bootstrap-confirm (a branch for bootstrap 3) which is working fine.

[Pablo Pazos Gutiérrez]

use class instead of id $(".confirmation_delete") and class="confirmation_delete"

[Paulo Maia]

Thanks for the quick feedback!

[Anael FAVRE]

Thanks for the help @ppazos :)