Как использовать сценарий JS внутри PHP, а l oop для каждого элемента l oop?

Question

Я пробовал ставить таймеры для каждого элемента php, а l oop. Однако он отображается только для первого. Я искал некоторые решения, включающие язык javascript в начале кода. Понятия не имею, как это сделать. Не могли бы вы мне помочь?

Вот код для l oop и таймера

<?php while($group = mysqli_fetch_assoc($active_groups)) : ?> //Some code of elements to display

  <p id="demo"></p>
  <script>
  var x = setInterval(function() {
    now = now + 1000;

    var distance = countDownDate - now;

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

    document.getElementById("demo").innerHTML = days + "d " + hours + "h " +
      minutes + "m " + seconds + "s ";

    if (distance < 0) {
      clearInterval(x);
      document.getElementById("demo").innerHTML = "EXPIRED";
    }
  }, 1000);
  </script>
?>
<?php endwhile; ?>

Answer 1

Вот так

<script>
  let countDownDate = new Date();
  countDownDate.setMinutes(countDownDate.getMinutes() + 5);
  countDownDate = countDownDate.getTime()
</script>

<?php $cnt = 0; ?>
<?php while($group = mysqli_fetch_assoc($active_groups)) : ?> 

//Some code of elements to display

  <p id="demo<?= cnt ?>"></p>
  <script>
  var x<?= cnt ?> = setInterval(function() {
    const now = new Date().getTime()

    const distance = countDownDate - now;

    const days = Math.floor(distance / (1000 * 60 * 60 * 24));
    const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    const seconds = Math.floor((distance % (1000 * 60)) / 1000);

    document.getElementById("demo<?= cnt ?>").innerHTML = days + "d " + hours + "h " +
      minutes + "m " + seconds + "s ";

    if (distance < 0) {
      clearInterval(x<?= $cnt ?>);
      document.getElementById("demo<?= cnt ?>").innerHTML = "EXPIRED";
    }
  }, 1000);
  </script>
?>
<?php $cnt++; ?>
<?php endwhile; ?>

Результат:

<script>
  let countDownDate = new Date();
  countDownDate.setMinutes(countDownDate.getMinutes() + 5);
  countDownDate = countDownDate.getTime()
</script>

<p id="demo0"></p>
<script>
  var x0 = setInterval(function() {
    const now = new Date().getTime()

    const distance = countDownDate - now;
    const days = Math.floor(distance / (1000 * 60 * 60 * 24));
    const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    const seconds = Math.floor((distance % (1000 * 60)) / 1000);

    document.getElementById("demo0").innerHTML = days + "d " + hours + "h " +
      minutes + "m " + seconds + "s ";

    if (distance < 0) {
      clearInterval(x0);
      document.getElementById("demo0").innerHTML = "EXPIRED";
    }
  }, 1000);
</script>
<p id="demo1"></p>
<script>
  var x1 = setInterval(function() {
    const now = new Date().getTime();

    const distance = countDownDate - now;

    const days = Math.floor(distance / (1000 * 60 * 60 * 24));
    const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    const seconds = Math.floor((distance % (1000 * 60)) / 1000);

    document.getElementById("demo1").innerHTML = days + "d " + hours + "h " +
      minutes + "m " + seconds + "s ";

    if (distance < 0) {
      clearInterval(x1);
      document.getElementById("demo1").innerHTML = "EXPIRED";
    }
  }, 1000);
</script>