php - custom post type column countdown

i have registered custom post type and i have created custom columns for it one of those columns is count down it's functionality to cut the NowTime from the custom meta date and time i have set perviously so i got it work via javascript and it's fine but it gets only one value for all rows here is my code :

this the registered column

 case 'reminder':
        $reminder = remider_text();

        break;

this is the function with javascript

function remider_text(){
$date = get_post_meta($post_id, 'booking_date', true);
$date_format = "M d, Y";
$meta = (!empty($date)) ? date($date_format, $date) : "";
$time = get_post_meta($post_id, 'time', true);
$data = $meta ." ". $time;

if ($data == '') {
    echo 'N/A';
    ?>
    <?php
    } else { ?>
                  <div id="countdown"></div>

<script>
    console.log(data)
// Set the date we're counting down to
var countDownDate = new Date(data).getTime();

// Update the count down every 1 second
var x = setInterval(function() {

    // Get todays date and time
    var now = new Date().getTime();

    // Find the distance between now and the count down date
    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);

    // Output the result in an element with id="demo"
    var elms = document.querySelectorAll("[id='countdown']");
    for(var i = 0; i < elms.length; i++) 
    elms[i].innerHTML = days + "d " + hours + "h "
    + minutes + "m " + seconds + "s ";

    // Changing text color
    var elms_color = document.querySelectorAll("[id='countdown']");
    for(var i = 0; i < elms_color.length; i++) 
    elms_color[i].style.color = days === 0 && hours < 3 ? 'red' : '';

     // Changing text color
     var elms_color = document.querySelectorAll("[id='countdown']");
    for(var i = 0; i < elms_color.length; i++) 
    elms_color[i].style.color = days === 2 && hours < 5 ? 'orange' : '';

    // If the count down is over, write some text 
    if (distance < 0) {
        clearInterval(x);
        for(var i = 0; i < elms.length; i++) 
        elms[i].innerHTML = "Outdated";
    }
}, 1000);
</script>
      <?php }
?>
<?php}

Here is the post meta date and time values

Aug 13, 2019 14:00
Oct 27, 2018 14:00
Oct 19, 2018 14:00
Oct 13, 2018 13:00
Oct 25, 2019 14:00
Oct 08, 2018 07:00

it just getting the last value for all rows

i have registered custom post type and i have created custom columns for it one of those columns is count down it's functionality to cut the NowTime from the custom meta date and time i have set perviously so i got it work via javascript and it's fine but it gets only one value for all rows here is my code :

this the registered column

 case 'reminder':
        $reminder = remider_text();

        break;

this is the function with javascript

function remider_text(){
$date = get_post_meta($post_id, 'booking_date', true);
$date_format = "M d, Y";
$meta = (!empty($date)) ? date($date_format, $date) : "";
$time = get_post_meta($post_id, 'time', true);
$data = $meta ." ". $time;

if ($data == '') {
    echo 'N/A';
    ?>
    <?php
    } else { ?>
                  <div id="countdown"></div>

<script>
    console.log(data)
// Set the date we're counting down to
var countDownDate = new Date(data).getTime();

// Update the count down every 1 second
var x = setInterval(function() {

    // Get todays date and time
    var now = new Date().getTime();

    // Find the distance between now and the count down date
    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);

    // Output the result in an element with id="demo"
    var elms = document.querySelectorAll("[id='countdown']");
    for(var i = 0; i < elms.length; i++) 
    elms[i].innerHTML = days + "d " + hours + "h "
    + minutes + "m " + seconds + "s ";

    // Changing text color
    var elms_color = document.querySelectorAll("[id='countdown']");
    for(var i = 0; i < elms_color.length; i++) 
    elms_color[i].style.color = days === 0 && hours < 3 ? 'red' : '';

     // Changing text color
     var elms_color = document.querySelectorAll("[id='countdown']");
    for(var i = 0; i < elms_color.length; i++) 
    elms_color[i].style.color = days === 2 && hours < 5 ? 'orange' : '';

    // If the count down is over, write some text 
    if (distance < 0) {
        clearInterval(x);
        for(var i = 0; i < elms.length; i++) 
        elms[i].innerHTML = "Outdated";
    }
}, 1000);
</script>
      <?php }
?>
<?php}

Here is the post meta date and time values

Aug 13, 2019 14:00
Oct 27, 2018 14:00
Oct 19, 2018 14:00
Oct 13, 2018 13:00
Oct 25, 2019 14:00
Oct 08, 2018 07:00

it just getting the last value for all rows

• php
• functions
• javascript

Share Improve this question edited Oct 23, 2018 at 8:36 abdelrhman kouta asked Oct 23, 2018 at 8:27 abdelrhman koutaabdelrhman kouta 1911 silver badge44 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

Although your question looks more like a generic javascript question than WordPress specific and would probably be better suited for another forum like stackoverflow, I would say the problem in your code is that you're using id="countdown" for all the countdown elements. You should use class="countdown" if you want to use the element multiple times on a single page. You can also check that you're getting all the right elements by doing a console.log(elems); after the document.querySelectorAll.