Hey there, I'm currently facing an issue with duplicating my JavaScript countdowns and displaying images of cards on each loop iteration. Strangely, the countdown only appears in the first instance even though it's within the loop. I'm seeking advice on what might be causing this discrepancy.
In addition to this problem, there are other functionalities like adding cards to a webpage upon clicking, triggering individual timers for each card. However, the primary concern remains unresolved – the duplication glitch within the loop. Interestingly, when I replace the countdown code with plain text in the table, it shows up correctly on every card.
Your assistance is greatly appreciated.
Here's a snippet of the HTML:
<div class="container">
<br>
<div class="row">
<h2 class="bold_font text-align-center">LIST OF CLAIMED CARDS</h2><br>
<?php
$i = 0;
foreach($lstOrders as $rowOrder) {
?>
<div class="col-md-4 spacer">
<div class="col-md-12">
<?php
$productid = $rowOrder['productid'];
$rowProduct = $mcProduct->SelectObj_ProductId($db, $productid);
?>
</div>
<div class="col-md-12">
<?php
for($j = 0; $j < $rowProduct['packageid']; $j++) {
echo(' <span class="glyphicon glyphicon-gift color-black"></span> ');
}
?>
</div>
<div class="col-md-12">
<a href="info-detailed.php?i=<?php echo($rowProduct['productid']) ?>">
<img src="../img/uploads/<?php echo($rowProduct['photosrc']) ?>" class="img-responsive clinic">
<img src="../img/shadow-bottom.png" class=" img-responsive">
</a>
</div>
<table align="center">
<tr>
<td colspan="4">Reclaim This Coupon In:<hr></td>
</tr>
<tr align="center">
<td id="c_countdown"></td>
</tr>
</table>
</div>
<?php
$i = $i + 1;
if($i >= 3) {
echo('<div class="col-md-12"></div>');
$i = 0;
}
} ?>
<!-- Empty Col -->
<div class="col-md-3 form-group">
</div>
</div> <!--row-->
<div class="row">
<div class="col-md-12 spacer">
</div>
</div>
</div>
JAVASCRIPT: (c_countdown)
var countDownDate = new Date("Jan 5, 2019 15:37:25").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("c_countdown").innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";
if (distance < 0) {
clearInterval(x);
document.getElementById("c_countdown").innerHTML = "EXPIRED";
}
}, 1000);
https://i.stack.imgur.com/afG59.png
added TEST in table