Php Mysqli While Counter Down Time Problem

I have below code that count down timer from database the problem is only count down only one field in while loop (the first field) helps please to count down all field in loop

<?php
    // Database Connection
  
    
      $mysqli = mysqli_connect('localhost','root','','demos');
    
       $result = mysqli_query($mysqli, "SELECT * FROM `special_offers`  ");
    
    while($res = mysqli_fetch_array($result)) { 
       

    ?>




                    
                     <input type="text" id="counter" value="<?php echo $res[8];?>"   />

javascript to handle timer

 <script>
   
       // Set the date we're counting down to
var countDownDate =  new Date( document.getElementById("counter").value).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);
    
  // Output the result in an element with id="demo"
  document.getElementById("counter").value = days + "d " + hours + "h "
  + minutes + "m " + seconds + "s ";
    
  // If the count down is over, write some text 
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("counter").value = "EXPIRED";
  }
}, 1000);
    </script>

close loop


<?php  

} ?>

the first field counter down working good

Solution

<body>

<!-- ---- HTML Code ---- -->
<form>
    <input type="text" id="counter_0" value="2022-12-31 10:36"   /> 
    <input type="text" id="counter_1" value="2022-12-15 08:00"   /> 
    <input type="text" id="counter_2" value="2022-12-01 06:00"   /> 
</form>




<!-- ---- JQuery Code ---- -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>    
$(function(){

    // Initialisation
        var nbCounter = 0;
    var counterList = new Object();
    var info = {};

    // For Each Fied Beginning by "counter_"
        $('[id^="counter_"]').each(function (index) {

                // Memorization
        info = {};
        info.id = $(this).attr('id');
        info.date = new Date($(this).val()).getTime();

        // Memorization
                counterList[index] = info;

                // Incrementation
                nbCounter++;
        });
    // End - For Each Fied Beginning by "counter_"



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

        // For Each Counter
                for (let i = 0; i < nbCounter; i++)
                {
                        // Extraction
                        idCurrent = counterList[i].id;
                        dateCurrent = counterList[i].date;

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

            // Find the distance between now and the count down date
                        var distance = dateCurrent - 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);

            // Output the result in an element 
                        document.getElementById("" + idCurrent + "").value = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";
                }
                // End - For Each Counter


    }, 1000);
});
</script>


    
</body>
</html>

This solution can work with Jquery which memorizes the different "input" "counter" and a function launched every second which processes the memorized "input"