I need help with my simple application. When I click on the selected (highlighted) row the alert box shows and I can confirm that I'd like to remove the selected one and that's fine - the selected row is being removed. The problem is that I checked what'll happen when I select one row and close the alert box, then 2nd row and close the alert box, then 3rd one, and so on. When I finally decide to use confirm button, not only the highlighted row is being removed but also the 2nd/3rd/4th clicked row which I decided not to remove. I want my app to remove only one, selected row regardless of how many times before using confirm button I clicked in any row and closed the alert box.

Below I'm putting the code responsible for the whole thing that I'm writing about.

Thanks in advance for any comments

const alertBox = document.querySelector('.alert-box');

tableBody.addEventListener('click',(e) => {

 document.querySelector('.ok').addEventListener('click',() => {
  
  const target = e.target.parentNode.childNodes[0].textContent;
  alertBox.classList.add('no-show');

  sizesList.forEach((element,index) => {

   if (element.size.toLowerCase() === target.toLowerCase()) {

    sizesList.splice(index,1);
    localStorage.setItem('size',JSON.stringify(sizesList));
    e.target.parentNode.remove();

   };

  });

 });

 document.querySelector('.fa-times').addEventListener('click',() => alertBox.classList.add('no-show'));
});