Cant figure out how it determine the exact click

I will like to understand how it determines the exactly clicked arrow and show its remaining content. My expectation is that the loop is supposed to be complete and i is expected to be equal to the final index of the array. What exactly is happening at the time of the click event?

let answer = document.querySelectorAll(".answer");
let arrow = document.querySelectorAll(".arrow");

for (let i = 0; i < arrow.length; i++) {

 /* prompt(i); */

  arrow[i].onclick = function() {
  arrow[i].classList.toggle("active");
  answer[i].classList.toggle("active");
  }
}