How can I attach the correct JSON fetch results to their corresponding container divs?

I’m trying to display a table of events from a JSON fetch – it mostly works as is, the only thing I’m struggling to figure out is how do I attach the correct events to be listed with their corresponding competition titles.

The result I’m getting right now are wrong as:
the first competition shows all of the fetched competitions’ matches,
the second one shows all matches except the first ones’,
the third competition shows all of the matches except the first and the seconds’
and so on.

As the below code shows I’m creating a wrapping div and a ‘p’ for the competition title, and after that I’m attaching the events (esports matches):

function appendData(data) { 
  var mainContainer = document.querySelector('.calendar-list');
  for (var i = 0; i < data.competitions.length; i++) {
    mainContainer.innerHTML += `<div><p class="event">` + data.competitions[i].name + `</p></div>`;
    for (var j = 0; j < data.competitions[i].events.length; j++) {
      for (var x of document.querySelectorAll('.calendar-list>div')) { x.innerHTML += `<p class="match"><span>` + data.competitions[i].events[j].home.name + `</span><span>` + data.competitions[i].events[j].away.name+ `</span><span>` + data.competitions[i].events[j].cutoffTime.slice(11, 16) + `</span></p>`;
      }
    } 

  }
}

the html structure of the list (with 2 competitions and a few events/matches) looks like this (except in reality the events are not sorted correctly):

<div class="calendar-list">
    <div>
        <p class="event">World Cup</p>
        <p class="match"><span>Cloud9 White Cloud</span><span>Guild X</span><span>17:00</span></p>
        <p class="match"><span>G2 Gozen</span><span>Liquid Brazil</span><span>17:00</span></p>
        <p class="match"><span>Cloud9</span><span>Guild X</span><span>17:00</span></p>
        <p class="match"><span>G2 Gozen White</span><span>Liquid Brazil</span><span>17:00</span></p></div>

    <div>
        <p class="event">Champions Tour: Game Changers Championship</p>
        <p class="match"><span>Cloud9 White</span><span>Guild X</span><span>17:00</span></p>
        <p class="match"><span>G2 Gozen</span><span>Liquid Brazil</span><span>17:00</span></p>
    </div>

</div>

How do I display only the matches that are inside each competition for their list view?