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

one text

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

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>

    <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 } ?>

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.

Source