countdown time data not showing in every loop card in JavaScript php mysqli

I have created a card and want to show time countdown for every row for same table and the loop is working well but timer just working for 1st loop and then it's not working for others loop not showing time countdown.

1st loop is fine like ...

100$ Package Plan 2.50$ Daily Earning time : 19h13m15s

but the second loop is showing without time like ..

25$ Package Plan 0.63$ Daily Earning time :

the time countdown need to show for every loop fetched data by the interval_time column. Need help .

Here is my php code `

    foreach($getActivePackages as $data){
    $status= $data['status'];
    $pack_term=$data['pack_term'];
    $packId =$data['id'];
    $interval_time =$data['interval_time'];
    $splitTimeStamp = explode(" ",$interval_time);
    $date = $splitTimeStamp[0];
    $time = $splitTimeStamp[1];
    $getPackageTerm = $getData->specificItem('pack', 'id', $pack_term);
    foreach($getPackageTerm as $row){
    $amount= $row['amount'];
    $days   =$row['days'];
    $interest = $row['daily_percentage'];
    $withdrawamount = ($amount*$interest)/100;
    $totalWithdraw = $withdrawamount+$amount;
    $dailyAmount = $totalWithdraw/$days ;
    $dailyAmount =number_format($dailyAmount, 2);
    }
    $data = strtotime($date);
    $getDate = date(" Y, F, d", $data);
Copy code

`

HTML `

    <div class="col-4 col-sm-12 col-xl-4 text-center text-xl-right">
    <p class="font-weight-normal" id="counter"></p>
    </div>
Copy code

`

JS

`

    <script>
    var countDownDate = new Date("<?php echo "$getDate $time"; ?>").getTime();
    var x = setInterval(function() {
    var now = new Date().getTime();
    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);
    document.getElementById("counter").innerHTML =hours +"Hours" + minutes + " min " + seconds + "s ";
    // If the count down is over, write some text 
    if (distance < 0) {
    clearInterval(x);
    document.getElementById("counter").innerHTML = "EXPIRED";
    }
    }, 1000);
    </script>
    <?php } ?>
Copy code

`

tried to loop the document.getElementById("counter") also put the JS inside the loop but the result is same loop data is retrieving but time is not showing in every single looped data.

Didn't find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.