Different times from php to javascript for countdown between 5 times -from time to time

Question

I want to export 5 different times from a php script for prayertimes calculation, and import them into Javascript to make a countdown timer between the times.

coutdown -> between fajr and dhur time

So I have tested many ways and alway stuck on one or another end.

Here a code example what will create my prayertimes. It is just the output object from a 10 site php script

echo 'Fajr: '      . format_am_pm($times[0]) . PHP_EOL;
echo 'Duha: '       . format_am_pm($times[1]) . PHP_EOL;
echo 'Dhur: '       . format_am_pm($times[2]) . PHP_EOL;
echo 'Asr: '        . format_am_pm($times[3]) . PHP_EOL;
...

So var_dump creates me an output of:--->

C:\xampp\htdocs\files\timer-settings.php:89:
array (size=7)

  0 => string '06:23' (length=5)
  1 => string '08:02' (length=5)
  2 => string '12:27' (length=5)
  3 => string '14:28' (length=5)
  4 => string '16:51' (length=5)
  ...

and I experimented for some days to get a solution, but now i get my $praytime_fajr converted to DateTime.

$prayertime_fajr    = new DateTime($times[0]);

so that var_dump output gives me

public 'date' => string '2024-01-28 06:23:00.000000' (length=26)

Now I want to bring my Php Variable to my javascript code. and always stuck on the variable -> to string thing, I think.

<?php $date = $prayertime_fajr; ?>
var countDownDate = new Date("<?php echo $date; ?>").getTime();

I already experimented with json_encode but i don't know where my failure sits. Maybe i have to kind of -explode- my variable on php side to string. Or point the java side on the string on the php side .

I also tried:

var countDownDate = <?= json_encode($prayertime_fajr, JSON_UNESCAPED_UNICODE); ?>;`

here the whole countdown script

<!-- Display the countdown timer in an element -->
<p id="demo"></p>

<script>
// Set the date we're counting down to
var countDownDate = new Date("<?php echo $prayertime_fajr; ?>").getTime();

// Update the count down every 1 second
var x = setInterval(function() {

  // Get today's date and time
  var now = new Date().getTime();

  // Find the distance between now and the count down date
  var distance = countDownDate - now;

  // Time calculations for days, hours, minutes and seconds
  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);

  // Display the result in the element with id="demo"
  document.getElementById("demo").innerHTML = days + "d " + hours + "h "
  + minutes + "m " + seconds + "s ";

  // If the count down is finished, write some text
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "EXPIRED";
  }
}, 1000);
</script>

If I exported the 5 php $prayertime_xxxx correct to Javascript, how can I get the countdown from one to an other $prayertime_xxxx? like:

$prayertime_1 -> $prayertime_2 after prayertime_2 -> $prayertime_3

something like where now is :

// Get today's date and time
var now = new Date().getTime();`

bring in $prayertime_2

var countDownDate2 = new Date("<?php echo $prayertime_dhur; ?>").getTime();

and create a loop until 5 ?