For some reason I have to call the same function twice because of that my event are firing twice. How can I prevent this?

function renderSeats(movieImg, title, release_date, dummyPrice = '3000') {
     
      // selected items
       //this is only a part of the code . 
      contianer.addEventListener('click', function (e) {
        if (
          e.target.classList.contains('seat') &&
          !e.target.classList.contains('unavailable')
        ) {
          e.target.classList.toggle('selected');
          payoutBtn.classList.add('active');
          console.log('yes');
          updateCountTotal(); //function call
        }
        contianer.setAttribute('listener', 'true');
      });
    
      const ticketOverlayClose = document.querySelector('.ticket__close-svg');
      // overlay deactive
      ticketOverlayClose.addEventListener('click', function (e) {
        overlayseats.classList.add('hidden');
        payoutBtn.classList.add('active');
        ticketContainer.classList.remove('active');
      });
    }

Every time I am calling the function from another function because I have to update the dom, suppose 3 times the event then also fire 3 times

I also attached an image. In the console, you see after I clicking back (it is a single-page app) and again load by page calling our rendered seat function, and this time when I click on the seats the even is firing twice.

[gif][1]:https://i.stack.imgur.com/Ik1CG.gif