The javascript below runs in a php page. When the php page is opened, the javascript runs and the 10 values in the array in the javascript are shown one at a time in order every second in a div in the php page called “h1”. Both php pages will be on the same server, in the same website. The first php page will be opened by me on my computer and the second php page will be opened by multiple users around the world on their computers in different time zones. The first php page and the second php page should always show the exact same values, always.

QUESTION
How do I show the 10 values in a second php page in real-time so that if a user refreshes the second php page or leaves the second php page and comes back to it, the values still continue showing in real-time in the second php page?

<div id="h1"></div>
<script>
var dialog = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'];

function changeText() {
  var timer = 0;
  for (let i = 0; i < dialog.length; i++) {
    setTimeout(() => document.getElementById('h1').innerHTML = dialog[i], timer);
    timer = timer + 1000;
  }
}

changeText();
</script>