Get the solution ↓↓↓
I quickly cobbled a demo to show how you might accomplish your goal without using ID attributes. I assumed that each row in the table is supposed to display a countdown timer?!
The sql, btw, looks like a suitable candidate for ajoin - which would mean using a single query but that is another thing entirely ~ just thought I'd mention it.
If you copy/run this you should see how it works - the tables being generated contain dummy data.
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<title></title>
<style>
body{font-family:monospace}
table{margin:0 auto 3rem auto;width:60%;float:none;border:1px solid gray;}
th{background:gray;color:white}
.timer{color:red}
</style>
<script>
/*
The function now accepts a DOM element as the first argument
rather than a string to represent the ID of a DOM element.
The original element has had it's ID replaced with a className
and, to make DOM navigation easier, the table-cell that holds
the date used in the countdown also has a className assigned.
*/
function createCountDown(n, date){
var countDownDate = new Date( date ).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);
n.innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";
if( distance < 0 ) {
if( !isNaN( x ) )clearInterval( x );
n.innerHTML = "SUCCESS";
}
}, 1000 );
}
/*
Using the `.timer` className find a collection of all table-cells
that will display a countdown.
Iterate through that nodelist collection, find the sibling row
with the date and assign the countdown.
*/
document.addEventListener( 'DOMContentLoaded',()=>{
Array.from( document.querySelectorAll( 'td.timer' ) ).forEach( td=>{
/*
find the sibling table-cell according to it's assigned className
and thus obtain the cell contents. Supply both as arguments to the
`createCountDown` function
*/
let expiry_date=td.parentNode.querySelector( '.expiry' ).textContent;
createCountDown( td, expiry_date );
});
});
</script>
</head>
<body>
<?php
for( $i=1; $i <= 5; $i++ ){
$h=mt_rand(8,18);
$m=mt_rand(1,59);
$s=mt_rand(1,59);
$month=date('m');
$day=mt_rand(1,29);
$year=2020;
$created=date('Y-m-d H:i:s',mktime($h,$m,$s,$month,$day,$year));
$expires=date('Y-m-d H:i:s',mktime($h,$m,$s,$month+1,$day,$year));
printf(
'
<table>
<tr>
<th>Order ID</th>
<th>My ID</th>
<th>My Customer ID</th>
<th>Create Date</th>
<th>Date After 1 Month</th>
<th>Amount</th>
<th>Countdown</th>
</tr>
<tr>
<td>$order_id</td>
<td>$current_user_uid</td>
<td>$woo_customer_id</td>
<td>%s</td>
<td class="expiry">%s</td>
<td>$amount</td>
<td class="timer"></td>
</tr>
</table>
',
$created,
$expires
);
}
?>
</body>
</html>
Try this:
createCountDown("demo", <?= "'{$date_after}'"; ?>)
Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.
Find the answer in similar questions on our website.
Do you know the answer to this question? Write a quick response to it. With your help, we will make our community stronger.
PHP (from the English Hypertext Preprocessor - hypertext preprocessor) is a scripting programming language for developing web applications. Supported by most hosting providers, it is one of the most popular tools for creating dynamic websites.
The PHP scripting language has gained wide popularity due to its processing speed, simplicity, cross-platform, functionality and distribution of source codes under its own license.
https://www.php.net/
JavaScript is a multi-paradigm language that supports event-driven, functional, and mandatory (including object-oriented and prototype-based) programming types. Originally JavaScript was only used on the client side. JavaScript is now still used as a server-side programming language. To summarize, we can say that JavaScript is the language of the Internet.
https://www.javascript.com/
HTML (English "hyper text markup language" - hypertext markup language) is a special markup language that is used to create sites on the Internet.
Browsers understand html perfectly and can interpret it in an understandable way. In general, any page on the site is html-code, which the browser translates into a user-friendly form. By the way, the code of any page is available to everyone.
https://www.w3.org/html/
Welcome to the Q&A site for web developers. Here you can ask a question about the problem you are facing and get answers from other experts. We have created a user-friendly interface so that you can quickly and free of charge ask a question about a web programming problem. We also invite other experts to join our community and help other members who ask questions. In addition, you can use our search for questions with a solution.
Ask about the real problem you are facing. Describe in detail what you are doing and what you want to achieve.
Our goal is to create a strong community in which everyone will support each other. If you find a question and know the answer to it, help others with your knowledge.