[FIXED] Countdown For WooCommerce Products

Issue

I create function to get the date and turn it to countdown. This my function code:

function countdown() {
    global $product;

    $start = get_post_meta( get_the_ID() , 'yung_product_date_start', true );
    $end = get_post_meta( get_the_ID() , 'yung_product_date_end', true );
    if ( $start && $end ) {
        $current = strtotime(date("Y/m/d"));
        $date = strtotime($start);
        $end_date = strtotime($end);
        if (( $date == $current || $current > $date ) && $current != $end_date && $end_date > $current) {
            wp_enqueue_script( "countdown", get_template_directory_uri() . '/assets/js/countdown.js', "1.0", true );
        
            wp_localize_script(
                "countdown",
                'countdown_js',
                array(
                    'to' => $end,
                    'from' => $start
                )
            );
            echo '<div id="product-countdown">
                <span id="countdown-counter"></span>
            </div>';
        } 
    }
}
add_action( 'woocommerce_before_add_to_cart_form', 'countdown' );

And this my javascript code which is in "countdown.js" file:

    jQuery(function($){
    "use strict";

    var from = countdown_js.from;
    var to = countdown_js.to;

    // Update the count down every 1 second
    var countDownDate = new Date(to).getTime();

    var x = setInterval(function() {

        // Get today's 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);

        if ( days<10 ) {
            var days = '0' + days;
        }
        if ( hours<10 ) {
            var hours = '0' + hours;
        }
        if ( minutes<10 ) {
            var minutes = '0' + minutes;
        }
        if ( seconds<10 ) {
            var seconds = '0' + seconds;
        }

        if ( days == 0 ) {
            var days = '';
        } else {
            days += ' : '
        }

        $('#countdown-counter').each( function() {
            var html = days + hours + " : " + minutes + " : " + seconds;
            $(this).html(html);
        });

        if (distance < 0) {
            clearInterval(x);
            $('#product-countdown').css("display", "none");
        }
    }, 1000);
});

This code works on single product page, but when I try this in the product archive, it only works on the first product and does not work on the rest products. I want each product to have own countdown. What should I do please help me!

Solution

Thanks to pianka for helping me to figure out this problem. I finally edited these codes and it finally worked.

function countdown() {
    global $product;

    $start = get_post_meta( get_the_ID() , 'yung_product_date_start', true );
    $end = get_post_meta( get_the_ID() , 'yung_product_date_end', true );

    if ( $start && $end ) {
        $current = strtotime(date("Y/m/d"));
        $date = strtotime($start);
        $end_date = strtotime($end);
        if (( $date == $current || $current > $date ) && $current != $end_date && $end_date > $current) {
            wp_enqueue_script( "countdown", get_template_directory_uri() . '/assets/js/countdown.js', "1.0", true );
            
            echo '<div class="product-countdown">
                <span class="countdown-counter" countdown="'. $end .'"></span>
            </div>';
        } ?>
        <?php 
    }
}
add_action( 'woocommerce_before_add_to_cart_form', 'countdown' );

and javascript code:

jQuery(function($){
"use strict";

    $('.countdown-counter').each( function() {
        var to = $(this).attr("countdown");
        var thisis = $(this);
        var parent = $(this).parent();
        var countDownDate = new Date(to).getTime();

        // Update the count down every 1 second
        var x = setInterval(function() {
            // Get today's 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);

            if ( days<10 ) {
                var days = '0' + days;
            }
            if ( hours<10 ) {
                var hours = '0' + hours;
            }
            if ( minutes<10 ) {
                var minutes = '0' + minutes;
            }
            if ( seconds<10 ) {
                var seconds = '0' + seconds;
            }

            if ( days == 0 ) {
                var days = '';
            } else {
                days += ' : '
            }

            var html = days + hours + " : " + minutes + " : " + seconds;
            thisis.html(html);

            if (distance < 0) {
                clearInterval(x);
                parent.css("display", "none");
            }
        }, 1000);
        thisis.removeAttr("countdown");
    });
});

Answered By - Daisy Belford