Modal content duplicate

Question

So the button works content works fine but until I click on the button it duplicates the first array content, I have tried using the solutions to the other answers on another stackoverflow post but they don't help me or work. Please help

each note in notes
  a(class='clickablebox', class='link', data-toggle='modal', data-target='#infoModal#{note.id}') #{note.title}
  div(class='modal fade', id='infoModal#{note.id}', tabindex='-1', role='dialog', aria-labelledby='infoModalLabel', aria-hidden='true')
    .modal-dialog.modal-dialog-centered(role='document', id='#{note.id}')
      .modal-content
        .modal-header
          h5#infoModalTitle.modal-title #{note.title}
          button.close(type='button' data-dismiss='modal' aria-label='Close') 
            i(class='fa fa-times')     
        .modal-body
          | #{note.content}

Notes is [{'id': 'e', title: 'a', content: 'content'}, {'id': 'a', title: 'e', content: 'content'}]]

Tried: Duplicates when iterating loop in jade Insert dynamic data into bootstrap modal from array object - vanilla javascript

And others that should to add an id to each modal

Answer 1

so it seemed like 'infoModal#{note.id}' so I just had to do 'infoModal'+note.id