How to remove an event listener with querySelectorAll after the click event is registered?

Question

I'm trying to build a game where a user will select one of the 6 divs displayed to him. Here I want to perform two operations, first is to get the index of the div that was clicked so I can perform some operation on the selected div. Secondly, I want to remove the event listeners on all those initial 6 divs.

I'm very new to JS and I'm stuck. Moreover, if you can give me a better approach I will be grateful.

here is the Code Snippet

function listenForSelection(target){
    let attributeArr = document.querySelectorAll(`.power-container-p${target}`);
    for(let i = 0; i < attributeArr.length; i++){
        attributeArr[i].addEventListener('click', judge.bind(null , i, target, attributeArr));
    }

    for(let i = 0; i < attributeArr.length; i++){
        attributeArr[i].removeEventListener('click', judge);
    }

}

here is the judge function that wants the index of the clicked div to perform its action.

var judge = function(i, target, attributeArr){
    let opposite = (target == 1) ? 2 : 1;
    let attribute = "";
    switch (i){
        case 0:
            attribute = "Age";
            break;
        case 1: 
            attribute = "Power";
            break;
        case 2:
            attribute = "Strength";
            break;
        case 3:
            attribute = "Defence";
            break;
        case 4:
            attribute = "Morality";
            break;
        case 5: 
            attribute = "Average";
            break;
    }

    console.log(attribute);
    console.log(target); 
    
}