I have a forEach showing a row of different images (fitness exercises) when you click on the image I want to show a clip of that exercise (gif).

But it doesn't show the same gif from the document of the image clicked on, it only shows the gif from the first document.

How do I make it so when you click on the image it shows the right gif from the same document.

I am collecting the image and gif from firestore.

Javascript Code

   const exgif = document.getElementById("exercise-gif");

                const e = query(collection(db, "user", uid, "yourWorkouts", id, "exercises"));
                const un = onSnapshot(e, (querySnapshot) => {

                    querySnapshot.forEach((doc) => {
                        // doc.data() is never undefined for query doc snapshots
                        console.log("exercises", doc.data());


                        const img = doc.data().image;
                        const exGif = doc.data().exGif;

                        exgif.innerHTML += `

                            <input type="image" id="toggle" src="${img}" class="ovr-ex-img" onclick="on()" />

                            <div id="over-exercise" onclick="off()">
                                <img class="ex-img" src="${exGif}">
                            </div>

                        `
                    });
                });  

function on() {
  document.getElementById("over-exercise").style.display = "block";
}

function off() {
  document.getElementById("over-exercise").style.display = "none";
}

HTML

<div class="" id="exercise-gif"></div>