Cannot access i inside function of a for loop

Question

i've been trying to make a for loop that adds an event listener to various elements, and each element should reference another element that has the same array position. But I cannot access the i inside the function.

I expected my function to be able to access the i in a for loop

const headers = document.getElementsByClassName('header');

const bodies = document.getElementsByClassName('body');

for (i=0; i<headers.length; i++) {
  headers[i].addEventListener('click', () => {
    bodies[i].style.heigth = 0;
  })
};