Helps with modals and buttons with for loop ( Semantic Ui)

Question

I have multiple buttons in a for loop. I want to show only one modal when I click a button, but now it shows all modals for every button when I click the button. I want to show one modal for each button. How do i fix the problem?

  each user in users
    tr
      td= user.email
      td
        .ui.basic.blue.button#more More
          .ui.mini.modal.myModal
            i.close.icon
            .header
              | #{user.email}
            .content
              |#{user.email}  
            .actions
              .ui.positive.right.labeled.icon.button
                 | Yep!
                 i.checkmark.icon 

JQuery

$('#more').click(function(){
  $('.ui.modal.myModal').modal({
  }).modal('show');
});

Answer 1

As Taplar's answer points out, id attributes are meant to be unique within a DOM.

Another approach would be to tie each button to its modal using classes or data attributes within the loop. You can get the index of the loop in pug and use that to create unique classes or data attributes.

each user, index in users
  tr
    td= user.email
    td
      // add a unique data attribute serialized with the id
      .ui.basic.blue.button(data-modal= 'modal-' + index) More
        .ui.mini.modal.myModal(data-modal= 'modal-' + index)
          i.close.icon
          .header
            | #{user.email}
          .content
            | #{user.email}  
          .actions
            .ui.positive.right.labeled.icon.button
              | Yep!
              i.checkmark.icon

This allows you to have more performant jQuery that avoids relying on DOM traversal

$('.button[data-modal]').click(function() {
  $('.modal[data-modal=' + $(this).attr('data-modal') + ']').modal().modal('show');
})