unwanted multiple event listeners

[tpzar]

Dear @linmasahiro, I have a table, populated from external API, with a searchString input component. Each row has a button to add that element to a database. Every time I update the table after modifying the searchString, a click event listener is added to the button. I see multiple click event listener attached to the same button. How to prevent this?

    const tableLoadingFinish = (elements, localTable) => {
      localTable.isLoading = false;
      Array.prototype.forEach.call(elements, function (element) {
        if (element.classList.contains("add-btn")) {
          element.addEventListener("click", function () {
            event.stopPropagation(); 
            add(this.dataset.id)
          });
        }
      });
    };

    watch(searchName, () => {
      doSearchAdd(0, addtable.limit);
    })

Thank you