Javascript mouseover toggles only on first cms item and not the other 5 please help

I wrote a mouseover event (see code screenshot) for the parent element which triggers a display to the gradient container and toggles a class on the image element. However on the published version only the first cms item gets triggered with mouseover and mouseout but the other don’t. can some1 help me with getting the others fixed aswell?

Screenshot 2022-04-25 at 13.43.35
the code

Here is my site Read-Only: LINK
(how to share your site Read-Only link)