Pass data from php foreach loop to javascript

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 a join - 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>

Answer

Solution:

Try this:

createCountDown("demo", <?= "'{$date_after}'"; ?>)

Source