AddEventListener listening for click going off multiple times depending on seemingly unrelated variables. Javascript, ElectronJS

Question

I'm building a simple desktop app based on ElectronJS. The app purpose is to generate mySQL databases by interacting with graphic interface created by me. The problem emerges when I add new columns to existing tables. Every time I will try to add a column an unexpected number of them will be added. However I seem to see the pattern, every time I go back from the column creator interface to table, the number of columns added when I re-enter any other column creator in any other table will be increased by one.

For instance if I enter a column creator in a table one three times, and i will leave it three times the number of added column in the 4th try will be 4.

Here is how I create new tables:

addTable.addEventListener('click', () => {

    // Create a container for the table
    const tableContainer = document.createElement('div');
    tableContainer.setAttribute('class', 'tableContainer')
    tableContainer.setAttribute('id', `tableContainer_${numberOfTables}`)
    newTableContainer.appendChild(tableContainer);

    /* Input field type text - table name */
    const tableName = document.createElement('input');
    tableName.setAttribute('id', `tableName_${numberOfTables}`);
    tableName.setAttribute('class', 'input');
    tableName.setAttribute('type', 'text');
    tableName.setAttribute('placeholder', 'Table name: ');
    tableContainer.appendChild(tableName);

    /* Input field type button - edit */
    const addColumns = document.createElement('input');
    addColumns.setAttribute('id', `addColumnsButton_${numberOfTables}`);
    addColumns.setAttribute('class', 'add-columns-button table-creator-button');
    addColumns.setAttribute('type', 'button');
    addColumns.setAttribute('data-table-number', numberOfTables)
    addColumns.setAttribute('value', 'Add columns');
    tableContainer.appendChild(addColumns);

    // Attach click event listener to the new add columns button
    addColumns.addEventListener('click', () => {
        // Get the value of the data-table-number attribute
        let buttonNumber = addColumns.getAttribute('data-table-number');
        // Use the buttonNumber to identify the associated tableName
        let tableToEdit = document.getElementById(`tableName_${buttonNumber}`);

        if (tableToEdit) {
            console.log("debug 1")
            editTheTableColums(tableToEdit, buttonNumber);
        }
    });


    /* Input field type button - delete the table */
    const deleteTheTable = document.createElement('input');
    deleteTheTable.setAttribute('id', `deleteTheTableButton_${numberOfTables}`);
    deleteTheTable.setAttribute('class', 'delete-the-table-button table-creator-button');
    deleteTheTable.setAttribute('type', 'button');
    deleteTheTable.setAttribute('value', 'Delete this table');
    deleteTheTable.setAttribute('data-table-number', numberOfTables)
    tableContainer.appendChild(deleteTheTable);

    // Attach click event listener to the new delete button
    deleteTheTable.addEventListener('click', () => {
        // Get the value of the data-table-number attribute
        let buttonNumber = deleteTheTable.getAttribute('data-table-number');
        // Use the buttonNumber to identify the associated tableContainer
        let tableToDelete = document.getElementById(`tableContainer_${buttonNumber}`);

        if (tableToDelete) {
            tableToDelete.parentNode.removeChild(tableToDelete);
        }
    });


    numberOfTables++;
});

Basically it's a not that complicated createElement script that runs for every button click.

So after I saw that the code is working and is relatively bugs safe, for what I tested I intended to use the same approach to create columns in the created tables. How is that done through the UI is that when you create a table, each of these gets it's own button that will say Add columns, if you click the button the tables disappear from the screen and you can create new columns by clicking the specific button at the top of the screen that appears there every time after you click the Add column button.

Here us the first function:

/* Handle adding columns to the tables */
function editTheTableColums(tableToEdit, buttonNumber) {
    console.log("debug 2")
    let numberOfColumns = 0;

    /* Check if the table name is not empty */
    if (tableToEdit.value.trim() != "") {

        mainH1.innerHTML = `Adding columns to the table <i>${tableToEdit.value}</i>`;

        /* Chnage the page */
        newTableContainer.style.display = "none";
        editColumnsContainer.style.display = "inline";

        /* Chnage the button visibility */
        addTable.style.display = "none";
        backToMainMenu.style.display = "none";
        backToTheTableCreator.style.display = "inline";
        addColumn.style.display = "inline";
        confirm.style.display = 'inline';

        //Create a new container assosiated with the table
        const tableColumns = document.createElement('div');
        tableColumns.setAttribute('class', 'tableColumns')
        tableColumns.setAttribute('id', `tableColumns_${buttonNumber}`)
        editColumnsContainer.appendChild(tableColumns);

        let currentTable = document.getElementById(`tableColumns_${buttonNumber}`)

        // Loop through the children elements and hide them
        for (let i = 0; i < editColumnsContainer.children.length; i++) {
            editColumnsContainer.children[i].style.display = "none";
        }

        currentTable.style.display = "inline";


        /* Column creator */
        addColumn.addEventListener('click', () => {
            addColumnFunc(buttonNumber, numberOfColumns, currentTable);
        }); // sth broke here
          
    }
}

And here are the two other functions that handle the columns:

const addColumnFunc = function(buttonNumber, numberOfColumns, currentTable) {
    
    console.log("debug 3")
    const currentButtonNumber = buttonNumber;

    // Create a container for the column
    const columnContainer = document.createElement('div');
    columnContainer.setAttribute('class', 'columnContainer')
    columnContainer.setAttribute('id', `columnContainer_${numberOfColumns}_${currentButtonNumber}`)
    currentTable.appendChild(columnContainer);

    let currentColumnContainer = document.getElementById(`columnContainer_${numberOfColumns}_${currentButtonNumber}`);

    /* Input field type text - column name */
    const columnName = document.createElement('input');
    columnName.setAttribute('id', `columnName_${numberOfColumns}_${currentButtonNumber}`);
    columnName.setAttribute('class', 'input column-name');
    columnName.setAttribute('type', 'text');
    columnName.setAttribute('placeholder', 'Column name: ');
    currentColumnContainer.appendChild(columnName);

    /* Input field type button - delete the column */
    const deleteTheColumn = document.createElement('input');
    deleteTheColumn.setAttribute('id', `deleteTheColumnButton_${numberOfColumns}_${currentButtonNumber}`);
    deleteTheColumn.setAttribute('class', 'delete-the-column-button column-creator-button');
    deleteTheColumn.setAttribute('type', 'button');
    deleteTheColumn.setAttribute('value', 'Delete');
    deleteTheColumn.setAttribute('data-column-number', numberOfColumns)
    currentColumnContainer.appendChild(deleteTheColumn);

    // Attach click event listener to the new delete button
    deleteTheColumn.addEventListener('click', () => {
        // Get the value of the data-column-number attribute
        let buttonNumber = deleteTheColumn.getAttribute('data-column-number');
        // Use the buttonNumber to identify the associated columnContaine
        let columnToDelete = document.getElementById(`columnContainer_${numberOfColumns}_${buttonNumber}`);

        if (columnToDelete) {
            columnToDelete.parentNode.removeChild(columnToDelete);
        }
    });


    numberOfColumns++;
};


/* Handle going back from column creator to the table creator */
backToTheTableCreator.addEventListener('click', () => {
    console.log("back")

    mainH1.innerHTML = `Editing ${databaseName}`;

    addColumn.removeEventListener('click', addColumnFunc);

    /* Chnage the page */
    newTableContainer.style.display = "inline";
    editColumnsContainer.style.display = "none";

    /* Chnage the button visibility */
    addTable.style.display = "inline";
    backToMainMenu.style.display = "inline";
    backToTheTableCreator.style.display = "none";
    document.getElementById("add-column").style.display = "none";
    confirm.style.display = 'none';

});

Adding columns for the first time will work as intended, one column will be added, however if I exit and enter any other table two columns will appear, and every exit will increase the number of columns that are being added by one.

Here are the console log outputs after starting the app, created three tables and going through one at a time, adding one column to each one (trying to add only one column to each one)

debug 1
temp.js:132 debug 2
temp.js:179 debug 3
temp.js:226 back
temp.js:91 debug 1
temp.js:132 debug 2
2temp.js:179 debug 3
temp.js:226 back
temp.js:91 debug 1
temp.js:132 debug 2
3temp.js:179 debug 3

The code might seem a bit messy or the comments unprofessional I am really sorry, it's safe to say that I'm a beginner. I'm also pretty sure that the question may be asked in a badly manner but English is not my first language, so pardon me for any mistakes. I also want to excuse myself for giving so much code but I'm not sure what part of it might cause the issues.

Edit one - adding the event.stopPropagation(); method does not resolve the issue. Big thanks to the @ElvisAdomnica for pointing it out as a possible solution