Javascript onclick event based on corresponding id iterations

I am attempting to create dynamic modal popups from query feeds in WordPress. One feed displays elements that need to be clicked and one feed holds the content for the modal popups. My current code adds an iterated id to all elements with a certain class if the parent has a certain id. This is occuring for the two different parent containers.

My problem is I want it to work so when you click on id=”team-0″ it will open the corresponding id=”modal-0″;

Here is my javascript:

const modalContainer = document.getElementById('modalContainer');
const modal = modalContainer.querySelectorAll('.team');

  modal.forEach((element, index) => {
    element.id = `modal-${index}`;
  });

const teamContainer = document.getElementById('teamContainer');
const team = teamContainer.querySelectorAll('.team');

  team.forEach((element, index) => {
    element.id = `team-${index}`;
  });

The HTML looks similar to this:

<div id="teamContainer">
<ul>
<li id="team-0" class="team"></li>
<li id="team-1" class="team"></li>
<li id="team-2" class="team"></li>
</ul>
</div>

<div id="modalContainer">
<ul>
<li id="modal-0" class="team"></li>
<li id="modal-1" class="team"></li>
<li id="modal-2" class="team"></li>
</ul>
</div>

The current way I am trying to make this work (but I understand if this is just completely wrong):

window.onload = function(){ 
  for (let i = 0; i < 10; i++) {
    let teamId = `team-${i}`;
    let teamIndex = document.getElementById(teamId);

    let modalId = `modal-${i}`;
    let modalIndex = document.getElementById(modalId);

    teamIndex.onclick = function() {
      modalIndex.style.display = "block";
    }
  }
};

Thank you for any responses and let me know if you need more information.