I have this code in javascript to change the product image on mouse over. It is working fine, but only for two first products. Last one is being ignored.

```

var list = document.querySelectorAll('span[data-oe-id] img');

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

    let image = list[i];

    let src = image.src;

    image.addEventListener("mouseover",function(event){

     console.log(src);

     image.src="https://media1.giphy.com/media/PfFtibPKBbQrK/giphy.gif?cid=ecf05e47b668e5062e9a561e681f23705e106d8d495b3915&rid=giphy.gif";

    });

    image.addEventListener("mouseout",function(event){

      image.src=src;

    });

}

Here is the video example of issue - https://mega.nz/file/aRUziACJ#bwTlV1wWd_P3kyqYARikyJC-o8hVszJikE_NDaM-jkw

I can't see why it is ignoring the last product, because it has the same HTML code structure as first two products

Resulting HTML code in the shop. My script is - mainimg.js (Yea. I know that js is loaded 3 times, just couldn't find way to load it once): https://pastebin.com/KPFuGnWA

Speaking about my templates code, there's nothing special, just an xpath for card and oe_product_cart classes