Отображение обратного отсчета в Django Loop при нажатии не работает должным образом

Здравствуйте, у меня есть следующий обратный отсчет в Javascript, который находится внутри цикла Django for, и он отображается более одного раза.

В моей текущей ситуации, когда я нажимаю на любую из кнопок запуска обратного отсчета, работает только первая. Я хочу иметь возможность щелкнуть на любой из них, и каждая из них работала отдельно при щелчке, а не одновременно.

вот сценарий: 

<button id="myBtn" onclick="myFunction()" type="button" class="btn btn-warning">
  <i class="fa-solid fa-play" style="margin-right:2px"></i>
  <span id="demo" class="countdown-live" style="text-align:center;"></span>
</button>

<script type="text/javascript">
    var countDownDate = new Date(Date.now() + 45000).getTime();
    var x = setInterval(function() {
      var now = new Date().getTime();
      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 = minutes + " : " + seconds + " ";
      if (distance < 0) {
        clearInterval(x);
        document.getElementById("demo").innerHTML = 'Done';
      }
    }, 1000);
</script>

Мой вопрос:

Как нажать на любую из кнопок обратного отсчета внутри django forloop, чтобы она работала правильно, так как сейчас работает только первая, когда я нажимаю на любую кнопку на странице.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button onclick="counter_function()">Start</button>
<button id="myBtn" type="button" class="btn btn-warning" style="display: none">
  <i class="fa-solid fa-play" style="margin-right:2px"></i>
  <span id="demo" class="countdown-live" style="text-align:center;"></span>
</button>

<script type="text/javascript">
    var x = null;
    function counter_function(){
        clearInterval(x);
         document.getElementById("demo").innerHTML = 0 + " : " + 0 + " ";
        document.getElementById("myBtn").style.display = "block";
        var countDownDate = new Date(Date.now() + 45000).getTime();

        x = setInterval(function() {
      var now = new Date().getTime();
      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 = minutes + " : " + seconds + " ";
      if (distance < 0) {
        clearInterval(x);
        document.getElementById("demo").innerHTML = 'Done';
      }
    }, 1000);
    }

</script>
</body>
</html>
Вернуться на верх