Javascript can't select iteration inside iteration? Why does this not work?

Question

var newPar = document.querySelectorAll('#newPar')
var newParImg = document.querySelectorAll('#newParImg')
    
    for (var i=0; i < newPar.length; i++){
      newPar[i].addEventListener('mouseover', function(e){
        newParImg[i].classList.toggle('is--active'); // <- here
      });
    };

I've no idea why this isn't working, nor how to make it work. Any ideas appreciated. Thanks.