EventListener function throwing error

Question

I am new to Web development and trying to create a simple project. I have the following HTML code:

<div id="container">
    <div class="ansBox"><p class="ansBoxP"></p></div>
    <div class="ansBox"><p class="ansBoxP"></p></div>
    <div class="ansBox"><p class="ansBoxP"></p></div>
    <div class="ansBox"><p class="ansBoxP"></p></div>
    <div class="ansBox"><p class="ansBoxP"></p></div>
    <div class="ansBox"><p class="ansBoxP"></p></div>
</div>

I am trying to compare the value in the paragraph to the answer set and display a message.

var ansBoxP = document.querySelectorAll(".ansBoxP");
var ansBox = document.querySelectorAll(".ansBox");

function setSquares() {

for(var i=0; i<numSquares; i++) {
    ansBox[i].addEventListener("click", function(){
        // Get value of square picked
        var clickVal = ansBoxP[i].textContent;
        console.log("click is " + clickVal);

        if(clickVal == answers[i]) {
            alert("corrent");
        }
        else {
            alert("incorrect"); 
        }
    });
  }
}

However i get the following error:

Uncaught TypeError: Cannot read property 'textContent' of undefined
at HTMLDivElement.<anonymous>

I believe the issue is with how I am setting the clickVal variable. Am I correct in saying this is a scoping issue?