I am building a pdf view with PDF.js to render pdf inside bootstrap modal, and according to the documentation I can listen to "shown.bs.modal" event when the modal popup is displayed so I have this code:

function renderPdfMobile() {
  docs.forEach(doc => {
    doc.addEventListener("click", function (e) {
      const file = e.target.dataset.file;

      var modal = document.getElementById("fileModal");
      modal.addEventListener('shown.bs.modal', function (event) {

      

      console.log(modal)

      })

    })

  })
}

renderPdfMobile()

Code works every time I click the modal button. The problem is it fires with the increment of +1 every time.

So in console When I click once, I get "fired" when I click again I get

"fired"
"fired"

another click results in:

"fired"
"fired"
"fired"

At this point, I don't know what I am doing wrong.

EDITED