Play multiple .lottie files (or players) on parent card hover

Question

I have a CMS website with a card design page and inside each card I have 3 lotties that I need to played all simultaneously at the card wrapper mouseover, and reverse play at mouseleave.

I've tried a lot of different codes and so far I could only have one of them play, and the other 2 never appear.

This is the code right now

inside head tag

<script type="module" src="https://unpkg.com/@dotlottie/[email protected]/dist/dotlottie-player.mjs" ></script>

inside body tag

<script>
const playerContainers = document.querySelectorAll(".card-wrapped-class");
playerContainers.forEach(container => {
  container.addEventListener("mouseover", () => {
    const player = container.querySelector("#player id or .class");
    player.setDirection(1);
    player.play();
  });
  container.addEventListener("mouseleave", () => {
    const player = container.querySelector("#player id or .class");
    player.setDirection(-1);
    player.play();
  });
});
</script>

three instances of a div with the player inside

<dotlottie-player class="player-class" id="player-id" src="cms-field-for-lottie-url" speed="2" style="width: 100%; height: 100%"></dotlottie-player>

That code only plays the first lottie, and when I modify to querySelectorAll no lottie plays and I get this console error TypeError: null is not an object (evaluating 'player.setDirection')