I already have a forEach showing an image and name this is clickable and takes you to a page ../page/details.

Once you click on that page (which would be the same page for all images and names) I want to then load the specific data with that document clicked on from Firestore.

I understand I would need to probably create an identifier and then show that in the detail page so it knows what was clicked (im able to do this in swift), but as models aren't used in JS how do I allow it to understand which content it should show.

As all images and names would be going to the same detail page would their also be a way to add the random doc id to the url so it would look something like ../page/details/Djf73Dhr7W8sJie6c3H9

Code to fetch the forEach and clickable detail page

 const i = query(collection(db, "teams"));
        const unsubscribe = onSnapshot(i, (querySnapshot) => {
            const teams = document.querySelector('.teams');

            querySnapshot.forEach((doc) => {
                const docData = doc.data();
                const team = teams.appendChild(document.createElement('teams'));

                team.innerHTML = `
                <a href="../page/detail.html">
                    <h1 class="team-names"></h1>
                </a>    
                <div class="team-line"></div>
                <img class="team-image">
                `;
                team.children[0].textContent = docData.ageGroup;
                team.children[2].src = docData.teamImage;

                console.log("Current data: ", docData);
            });
        });

Where I show the forEach

<div class="teams">
    </div>