Sorry for the long title.

::: WHAT I DID ::::
I added javascript in php page 1 which we will call “test1.php”. There is an array with 10 values in the javascript. When test1.php is opened, the javascript runs, showing the next array value every second in a div called “h1”.

::: WHAT I NEED :::
I need to be able to open test1.php which starts the javascript, causing the next array value to show every second in a div called “h1” in test1.php. There is a second php page we’ll call “test2.php”. Now test1.php is open and the javascript is running showing the next arrary value in a div called “h1” in test1.php. When I open test2.php, I need test2.php to also show each array value from test1.php every second in real-time and if I refresh test2.php, I should still see each array value from the javascript running in test1.php showing in test2.php in real-time. Whenever I open test1.php and then open test2.php, both pages (test1.php and test2.php) should always show the exact same array values every second no matter how many times I refresh test2.php. The javascript only stops when I close test1.php. I was able to create a javascript in test1.php that shows the next array value every second in a div called “h1” in test1.php. I was not able to make the array values show in test2.php at all.

:::: QUESTION ::::
How do I make each array value from test1.php show in test2.php in real-time with test2.php always showing the exact same array values appearing in test1.php no matter how many times I refresh test2.php? The javascript that shows the next array value every second in a div called “h1” in test1.php is shown below. Thank you!

<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>