(Javascript) - How can I remove duplicate event occurrence

Question

Good evening guys, I am learning Javascript and decided to create this layout to test some knowledge, created a table and a modal to add users to the table.

I’m creating the part of edit users, and for this, each user inserted in the table has a button edit, so I thought I’d add a click event so that when the user clicks on the edit button, he can run the rules I need.

The problem I am having is the following, it adds the click event normally, only that to each new user inserted in the table, it is duplicating the click event, and this cannot occur.

In the example below, I have 3 users entered, and when I clicked the edit button on the first user, it triggered the click event 3 times.

The code I did to test is this, where it has a method called edit:

editUser() {
    let editButton = [...document.querySelectorAll('[data-edit]')];
    editButton.forEach((element) => {
        element.addEventListener('click', () => {
            console.log('Cliquei!');
        });
    });
}

This dataset called date-Edit it is present on all edit buttons, use it to locate these buttons and apply the click event.

I would love to solve this problem I tried to get around by this other means but it did not work:

editUser() {
    let fn = (event) => {
        console.log('Cliquei', event);
    }

    let arr = [];
    for (let i of [...document.querySelectorAll('[data-edit]')]) {
        arr.push(i);
    }

    for (let i of arr) {
        i.addEventListener('click', fn);
    }

    for (let i of arr) {
        i.removeEventListener('click', fn);
    }

    for (let i of arr) {
        i.addEventListener('click', fn);
    }

}

I believe the problem is that this method, is being called whenever it adds a new user to the table, but I could not get around this problem, could anyone help me? thank you in advance.

If anyone wants the code here: hmtl: https://pastebin.com/vRK6XhZj index: https://pastebin.com/m42pj29S Class code: https://pastebin.com/33WXMaZ6