Frage Synchronisierte Webseite die einen Zähler anzeigt

[Wachhund]

Hallo Community,

ich habe mir eine Webseite zusammen gebaut, auf der durch klicken auf den Button ein Zähler gestartet wird. Durch wiederholtes klicken, wird ein weiterer Zähler gestartet. Jeder Zähler der die Zahl 10 erreicht hat, wird nach 5 weiteren Sekunden entfernt.
Wenn kein Zähler am hochlaufen ist, wird der Text "Niemand in der Umkleide" angezeigt.

Mein Umgebungsaufbau ist wie folgt:
Ich habe mehrere Raspberry Pis, an denen ein Monitor angeschlossen ist. Auf dem Monitor wird ein Informationsbildschirm angezeigt, wo ich ein iFrame einbinden kann.
An einem Raspberry Pi, wird ein physikalischer Druckknopf angeschlossen, mit dem der Zähler gestartet werden soll.

Mein Ziel ist es, dass mittels des physikalischen Druckknopf der Zähler auf der Seite gestartet werden soll, genauso wie es der virtuelle Button derzeit macht.
Weiteres Ziel ist es, dass an allen Bildschirmen auf dem die Seite angezeigt wird, die Zähler synchron angezeigt werden. Entweder weil diese die Information zentral beziehen oder weil alles gleichzeitig einen trigger oder so erhalten.

Erschwertes Problem, bei meinem Test konnte ich die derzeitige Seite in dem iFrame nur anzeigen, wenn ich die online gehostet habe, z.B. bei Strato. Habe ich einen apache server auf einen der Raspberry Pis laufen, kann ich die zwar mit einem Browser öffnen, aber leider nicht mit dem iFrame.


Mein vorhandens Skript:

<h1 id="timer-count"></h1>
<div id="timers"></div>
<button id="start-timer">Start Timer</button>
<p id="click-count">Button wurde 0 mal geklickt</p>
<script>
const timerCountHeading = document.querySelector('#timer-count');
const timersContainer = document.querySelector('#timers');
const startTimerButton = document.querySelector('#start-timer');
const clickCountDisplay = document.querySelector('#click-count');

let clickCount = 0;

startTimerButton.addEventListener('click', function() {
  clickCount++;
  clickCountDisplay.innerHTML = `Button wurde ${clickCount} mal geklickt`;
 
  if (timersContainer.innerHTML === '<div style="color: red; font-weight: bold; font-size: 20px;">Niemand in der Umkleide</div>') {
    timersContainer.innerHTML = '';
  }
 
  timerCountHeading.innerHTML = `Aktive Zähler: ${timersContainer.children.length + 1}`;
  timerCountHeading.style.display = "block";
 
  const timerDisplay = document.createElement('div');
  timerDisplay.innerHTML = '0 Sekunden';
  timersContainer.appendChild(timerDisplay);
 
  let timerValue = 0;
  const intervalId = setInterval(function() {
    timerValue++;
    timerDisplay.innerHTML = timerValue + ' Sekunden';
   
    if (timerValue === 10) {
      clearInterval(intervalId);
      setTimeout(function() {
        timerDisplay.remove();
        if (timersContainer.children.length === 0) {
          timersContainer.innerHTML = '<div style="color: red; font-weight: bold; font-size: 20px;">Niemand in der Umkleide</div>';
          timerCountHeading.style.display = "none";
        }
        else {
          timerCountHeading.innerHTML = `Aktive Zähler: ${timersContainer.children.length}`;
        }
      }, 5000);
    }
  }, 1000);
});

timerCountHeading.style.display = "none";
timersContainer.innerHTML = '<div style="color: red; font-weight: bold; font-size: 20px;">Niemand in der Umkleide</div>';
</script>

Ich hoffe das ich mein Problem ausreichend erklären konnte und vor allem das jemand eine Idee hat, die mir weiter hilft.

Gruß