Trigger Elementor Popup via code PHP and JavaScript

I have created a code which will check if zone is nz real then display popup otherwise do not. it should work on normal checkout process and page refresh also. right now it's working on page refresh only. without page refresh it isn't displaying popup.

File : Functions.php

add_action( 'woocommerce_cart_totals_after_shipping' , 'shipping_zone_targeted_postcodes_custom_notice' );
add_action( 'woocommerce_review_order_after_shipping' , 'shipping_zone_targeted_postcodes_custom_notice' );
function shipping_zone_targeted_postcodes_custom_notice() {
    $chosen_methods    = WC()->session->get( 'chosen_shipping_methods' );
    $chosen_method     = explode(':', reset($chosen_methods) );
    $shipping_zone     = WC_Shipping_Zones::get_zone_by( 'instance_id', $chosen_method[1] );
    $current_zone_name = $shipping_zone->get_zone_name();

    $popup_id = '3003';
    ElementorPro\Modules\Popup\Module::add_popup_to_location( $popup_id );

    ?>
    <script>
        jQuery( window ).on( 'elementor/frontend/init', function() {
            elementorFrontend.on( 'components:init', function() {
                console.log("loading ele");
            });
        });
    </script>

    <?php
    if(  $current_zone_name  == "NZ Rural"){
        $popup_id = '3003';
        ElementorPro\Modules\Popup\Module::add_popup_to_location( $popup_id );
        ?>
        <script>
            jQuery( window ).on( 'elementor/frontend/init', function() {
                elementorFrontend.on( 'components:init', function() {
                    console.log("loading ele 2");
                    elementorFrontend.documentsManager.documents[<?php echo $popup_id ;?>].showModal();
                    elementorProFrontend.modules.popup.showPopup({ id: 3003 });
                });
            });
        </script>
        <?php
    }
}

can you please help me?