Fetching data after forEach() from Firestore in Javascript

Im building a workout web app and need to show how many round are going to do done per workout and how many exercises per round.

As the amount of rounds and exercise per round will be different for every workout, I’ve set them as forEach.

But I need to know the docID (shown as “roundID”) of the rounds collection to get that specific collections, sub collection to show the specific exercises.

Currently it is not showing the exercises as I need to wait for the first fetch to be complete and then use that docId which, I am unable to do.

I have tried await with loops, async but have been unable to get it to work.

Currently my code is:

Main forEach getting the rounds

const Rnds = document.getElementById("rnds");

const roundRef = query(collection(db, "user", uid, "yourWorkouts", id, "rounds"));
const unsub = onSnapshot(roundRef, (querySnapshot) => {

     querySnapshot.forEach((doc) => {

          const roundID = doc.id;
          const rounds = doc.data().round;
          const rests = doc.data().rest;

          console.log("Round", roundID);

          Rnds.innerHTML += `
               
               <h2>${rounds}</h2>
                            
               A list of the amount of exercise docs in "exercise" collection
                            
               <p>${rests}</p>
                        `
     });
});

and then, fetch the exercise for the rounds

const exerciseRef = query(collection(db, "user", uid, "yourWorkouts", id, "rounds", roundID, "exercises"));
const exerciseUnsub = onSnapshot(exerciseRef, (querySnapshot) => {

     querySnapshot.forEach((doc) => {

          const reps = doc.data().rep;
          const names = doc.data().exerciseName;

          console.log("Exercises", doc.data());

     });
});

I am aiming for it to look like this