Hover Event in repeater not working when its connected to a Database

I have this code that I’m doing, what it does is once I hover over my mouse in a specific column in a repeater, another object shows. and once it leagues, the object hides itself. It works perfectly fine with any amount of columns, and when its not connected to the database. but once I connect the objects to the data, it doesn’t work anymore. What could be the issue?

import wixWindow from 'wix-window'; 

let fadeOptions = {
 "duration":   100,
 "delay": 0
};

$w.onReady(function () {
    wixWindow.lightbox.close();
        console.log("This is working");
    $w("#repeater1").forEachItem( ($item, itemData, index) => {
        console.log("This is working2");
        $item("#repeatedImage").onMouseIn((event) => {
            console.log("Showing Box");
            $item("#box2").show("fade", fadeOptions);
        })
        $item("#repeatedImage").onMouseOut((event) => {
            console.log("Hiding Box");
            $item("#box2").hide("fade", fadeOptions);
        })

    })
});