Event listener is called multiple times although addEventListener is set to once and it breaks app animation

Question

When the add prompt button(addTodoBtnLm) is clicked an event listener is attached to the close button(closePromptBtn) inside the prompt. When the close button is clicked it removes the event listener as it should but if the add prompt button is clicked it doesn't remove it.

const addTodoBtnLm = document.getElementById('todo-app-intro__add-btn');
const refreshQuoteBtn = document.getElementById('quote__btn');
const timsIntroBtns = {};

function checkActiveBtn(btnLm) {
  if (btnLm.getAttribute('aria-expanded') === 'false') {
    btnLm.classList.add('btn--active');
  } 
  else {  
    btnLm.classList.remove('btn--active');
  }
};

function showPrompt(hideTmId, promptLm, btnLm) {
  clearTimeout(hideTmId);
  promptLm.removeAttribute('hidden');
  btnLm.setAttribute('aria-expanded', true);
  setTimeout(() => {
    promptLm.classList.add('todo-app-prompt--active');
  }, 0);
}

function setHideTim(timeoutId, promptLm) {
  timsIntroBtns[timeoutId] = setTimeout(() => {
    promptLm.setAttribute('hidden', '');
  }, 1500);
}

function hidePrompt(promptLm, btnLm, closeBtnLm, wrappingFunction) {
  closeBtnLm.removeEventListener('click', wrappingFunction);
  btnLm.setAttribute('aria-expanded', false);
  promptLm.classList.remove('todo-app-prompt--active');
}

function addTodoPrompt() {
  const todoAppPromptLm = document.getElementById('todo-app-prompt');
  const closePromptBtn = document.getElementById('todo-app-prompt__cancel-btn');

  function wrappingFunction() {

/*I've tested it with the word wrapper, if the add button is clicked multiple
times and after the close button is clicked the word wrapper doesn't show 
once, but multiple times, as many times as the add prompt button has been
clicked.*/
    console.log('wrapper');

    checkActiveBtn(addTodoBtnLm);
    setHideTim('promptHideTmId2', todoAppPromptLm)
    hidePrompt(todoAppPromptLm, addTodoBtnLm, closePromptBtn, wrappingFunction);
  }

  checkActiveBtn(addTodoBtnLm);

  if (todoAppPromptLm.matches('.todo-app-prompt--active')) {
    setHideTim('promptHideTmId', todoAppPromptLm)

//this should remove the event listener but it doesn't.
    hidePrompt(todoAppPromptLm, addTodoBtnLm, closePromptBtn, wrappingFunction);
  } 
  else {
    showPrompt(timsIntroBtns.promptHideTmId, todoAppPromptLm, addTodoBtnLm);
    clearTimeout(timsIntroBtns.promptHideTmId2);
    closePromptBtn.addEventListener('click', wrappingFunction);
  }
}

addTodoBtnLm.addEventListener('click', () => {
  addTodoPrompt();
});

First test solution:

I've tried placing the removeEventListener inside the if statement, that detects if the prompt is open and closes it. It should remove the event listener too, but it doesn't. Maybe is not the event listener and is another thing, the problem is that I want to remove the event listener when the prompt is closed because is not being used.

Second test solution:

I've also tried to make the close button attached event listner to exist only once with {once: true}. It works, partially, as now I can remove the removeEventListener but the event still adds up if the add button is clicked multiple times, check in console word 'wrapper' after clicking add various times and after click the close prompt button.

Answer 1

SOLVED

/*SOLVED :)*/
/*This works the same as before, mostly, but the event is added only once
with: {once: true}. If the user clicks multiple times the add button, it
doesn't add more events, as the clicks are counted and the maximum is 1.
Once the user clicks the close button, the clicks restart and the 
event goes away as it was declared with {once: true}. So when the user adds a
new prompt a new event is added once more.*/

function hidePrompt(promptLm, btnLm) {
  btnLm.setAttribute('aria-expanded', false);
  promptLm.classList.remove('todo-app-prompt--active');
}

let clicks = 0;

function addTodoPrompt() {
  clicks++
  const todoAppPromptLm = document.getElementById('todo-app-prompt');
  const closePromptBtn = document.getElementById('todo-app-prompt__cancel-btn');

  checkActiveBtn(addTodoBtnLm);

  if (todoAppPromptLm.matches('.todo-app-prompt--active')) {
    setHideTim('promptHideTmId', todoAppPromptLm);
    hidePrompt(todoAppPromptLm, addTodoBtnLm);
  } 
  else {
    showPrompt(timsIntroBtns.promptHideTmId, todoAppPromptLm, addTodoBtnLm);
    clearTimeout(timsIntroBtns.promptHideTmId2);
    if (clicks <= 1) {
      closePromptBtn.addEventListener('click', () => {
        console.log('wrapper');
        clicks = 0;
        checkActiveBtn(addTodoBtnLm);
        setHideTim('promptHideTmId2', todoAppPromptLm)
        hidePrompt(todoAppPromptLm, addTodoBtnLm);
      }, {once: true});
    } 
  }
}

It works the same as before, mostly, but the event is added only once with: {once: true}. If the user clicks multiple times the add button, it doesn't add more events, as the clicks are counted and the maximum is 1. Once the user clicks the close button, the clicks restart and the event goes away as it was declared with {once: true}. So when the user adds a new prompt a new event is added once more.