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}

Read more here:: custom post type column countdown

Leave a Reply

Your email address will not be published. Required fields are marked *