I tried debugging the only thing i found was everytime parent function executes more event listeners being added :(
I think line 46-69 has the problem. Here is the codepen link:
const cancelDeletion = (element) => {
toggleBackdrop();
deleteModalConfirmation.classList.remove("visible");
};
const confirmDeletion = (element) => {
toggleBackdrop();
element.remove();
deleteModalConfirmation.classList.remove("visible");
};
const deleteMovieModal = (element) => {
toggleBackdrop();
deleteModalConfirmation.classList.add("visible");
cancelDeletionElement.addEventListener(
"click",
cancelDeletion.bind(this, element)
);
confirmDeletionElement.addEventListener(
"click",
confirmDeletion.bind(this, element)
);
};
This might be because everytime deleteMovieModal runs, you register a new event listener, so when it runs the first time you add one event listener, and when it runs the second time you have two event listeners, etc.
Either remove them with removeEventListener or use addEventListener('something', someCallback, { once: true })