Showing a forEach inside a forEach?

Im pretty sure this isn’t the way to do it. But, I have a number of rounds for exercises between 1-5 (lets say) and inside these rounds ill have a number of exercises anywhere between 2-8.

I am able to create a forEach to show the rounds. But how do I show the exercises as well.

I know its showing double the amounts of rounds and not showing any exercises with the way im doing it (which I know wouldn’t work).

How would I show the forEach of exercises with the correct round (thats also a forEach)?

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

const rd = query(collection(db, "user", uid, "yourWorkouts", id, "rounds"));

const uns = onSnapshot(rd, (querySnapshot) => {
  querySnapshot.forEach((doc) => {
    console.log("rounds", doc.data());

    const DocId = doc.id;
    const Title = doc.data().title;

    const rdex = query(
      collection(
        db,
        "user",
        uid,
        "yourWorkouts",
        id,
        "rounds",
        docId,
        "exercises"
      )
    );
    querySnapshot.forEach((doc) => {
      console.log("exercises", doc.data());

      const ExName = doc.data().exerciseName;

      Rnds.innerHTML += `
        <h2>${Title}</h2>                        
        <p>${ExName}</p>
      `;
    });
  });
});

I am fetching the data form Firestore.