Multiple Embed Videos at the same page

API
2

You have three of each function with the same name.

So the last function likely “beats” all the other ones.

So

    function handleOffline() {
      document.getElementById("twitch1").classList.add('hide1');
      player.removeEventListener(Twitch.Player.OFFLINE, handleOffline);
      player.addEventListener(Twitch.Player.ONLINE, handleOnline);
      player.setMuted(true);
    }
    function handleOffline() {
      document.getElementById("twitch2").classList.add('hide2');
      player.removeEventListener(Twitch.Player.OFFLINE, handleOffline);
      player.addEventListener(Twitch.Player.ONLINE, handleOnline);
      player.setMuted(true);
    }
    function handleOffline() {
      document.getElementById("twitch3").classList.add('hide3');
      player.removeEventListener(Twitch.Player.OFFLINE, handleOffline);
      player.addEventListener(Twitch.Player.ONLINE, handleOnline);
      player.setMuted(true);
    }

In JS essentially means

    function handleOffline() {
      document.getElementById("twitch3").classList.add('hide3');
      player.removeEventListener(Twitch.Player.OFFLINE, handleOffline);
      player.addEventListener(Twitch.Player.ONLINE, handleOnline);
      player.setMuted(true);
    }

So the code to handle the first and second embeds is uncallable.
(Well each initiate function exists long enough to be called before it’s overwritten)

But thats your problem you are overwriting the function as you used the same name.

You need to revise the code to understand which frame is to be updated or to handle distinct naming of functions