Por alguna razón, tengo que llamar a la misma función dos veces porque mi evento se dispara dos veces. ¿Cómo puedo prevenir esto?

 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'); }); }

Cada vez que llamo a la función desde otra función porque tengo que actualizar el dom, suponga 3 veces el evento y luego dispare 3 veces

También adjunto una imagen. En la consola, verá después de hacer clic en Atrás (es una aplicación de una sola página) y volver a cargar por página llamando a nuestra función de asiento renderizado, y esta vez, cuando hago clic en los asientos, el par se dispara dos veces.

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