I am trying to bind functions that are activated via an event listener 'click' each with a corresponding function updating a virtual obj/arr representing that square. (As a tic-tac-toe game). When one square is clicked and its corresponding bound function called to change the interal object, every obj in the container array is affected. Even though the function is confirmed to be bound to a single element in the array.

const playerController = (() => {
    const playerClick = (square) => {
        console.log(gameBoardData.virtualBoard[square])
        gameBoardData.virtualBoard[square].clicked = true;
        // console.log(gameBoardData.virtualBoard[square].clicked)
    }

    return { 
        playerClick
    }

})();

const displayController = (() => {
    const htmlBoard = Array.from(document.querySelector('#gbContainer').children);

    htmlBoard.forEach((ele, idx) => {
        ele.addEventListener('click', playerController.playerClick.bind(ele, idx));
    });

    return {
        htmlBoard
    }
})();

const gameBoardData = (() => {
    const virtualBoard = new Array(9);

    virtualBoard.fill({
        clicked: null
    });

    return {
        virtualBoard,
    }

})();

console.log(gameBoardData.virtualBoard);
//event listener to inspect full array.
const btn = document.getElementById('addBtn')

btn.addEventListener('click', () => addBox());

function addBox() {
    gameBoardData.virtualBoard.forEach((x) => console.log(x));
}

It was also hard for me to formulate a proper title, feel free to edit title for better clarity/semantics.