Help with CODE BUG needed - Javascript/CSS/HTML

Hello all! I'm a freelance filmmaker and I'm trying to set up my own website through Squarespace. I'm trying to have a gallery of images (static thumbnails of my videos) that has a hover over effect that turns that static thumbnail into a GIF with of the video in question (maintaining the same size of the thumbnail in the site). This is an exact example of the effect I'm aiming for - without any transitions or other hover effects rather than turning the static image into a gif. ----> [login to view URL] I found this piece of code that I'm injecting into the footer of my site but I don't know how to apply it to multiple images. I've only achieved 2 images but when I copy the formulas again again things start to get messy (2 gifs activate at the same time or the images change order within the page) Here is the initial code: <script> (function() { var imgs = [login to view URL]('img'); for (var i = 0, n = [login to view URL]; i < n; i++) { if (imgs[i].getAttribute("data-image-id") == "5502fcb0e4b03593df0d8ed2") { imgs[i].setAttribute("id", "targetIMG"); imgs[i].addEventListener("mouseover", newImage); imgs[i].addEventListener("mouseout", oldImage); break; } } })(); function newImage() { var img = [login to view URL]("targetIMG"); [login to view URL]("src").value = "[login to view URL]"; } function oldImage() { var img = [login to view URL]("targetIMG"); [login to view URL]("src").value = "[login to view URL]"; } </script> Here's my improvised modification that works like that for 2 images max: <script> (function() { var imgs = [login to view URL]('img'); for (var i = 0, n = [login to view URL]; i < n; i++) for (var i2 = 0, n = [login to view URL]; i < n; i++) { if (imgs[i].getAttribute("data-image-id") == "5c59360e104c7bf3fe7b39aa") { imgs[i].setAttribute("id", "targetIMG"); imgs[i].addEventListener("mouseover", newImage1, newImage2); imgs[i].addEventListener("mouseout", oldImage1, oldImage2); imgs[i2].setAttribute("id", "targetIMG2"); imgs[i2].addEventListener("mouseover", newImage2); imgs[i2].addEventListener("mouseout", oldImage2); break; } } })(); function newImage1() { var img = [login to view URL]("targetIMG"); [login to view URL]("src").value = "[login to view URL]"; } function oldImage1() { var img = [login to view URL]("targetIMG"); [login to view URL]("src").value = "[login to view URL]"; } function newImage2() { var img = [login to view URL]("targetIMG2"); [login to view URL]("src").value = "[login to view URL]"; } function oldImage2() { var img = [login to view URL]("targetIMG2"); [login to view URL]("src").value = "https://static1.squarespace.com/static/5a2e8f32bce1760b41249e7e/t/5c59417df9619a06daa06583/1549353357049/Captura+de+pantalla+2019-02-05+a+las+[login to view URL]"; } </script> I don't know any code and I'm looking for any freelance coder that could sort this out for me. I know nothing about coding and this is as far as I've reached. Many thanks in advance. Best, Víctor.