title: Cant figure out how it determine the exact click
body: <p>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?</p>
  <pre><code>let answer = document.querySelectorAll(&quot;.answer&quot;);
  let arrow = document.querySelectorAll(&quot;.arrow&quot;);
  
  for (let i = 0; i &lt; arrow.length; i++) {
  
   /* prompt(i); */
  
    arrow[i].onclick = function() {
    arrow[i].classList.toggle(&quot;active&quot;);
    answer[i].classList.toggle(&quot;active&quot;);
    }
  }
  </code></pre>