Add country calling code prefix in woocommerce billing phone on change country in checkout

country-prefix-billing-phone.php

<?php
add_action( 'wp_footer', 'scripts_for_adding_country_prefix_on_billing_phone' );
function scripts_for_adding_country_prefix_on_billing_phone(){
    ?>
    <script type="text/javascript">
        ( function( $ ) {
            $( document.body ).on( 'updated_checkout', function(data) {
                var ajax_url = "<?php echo admin_url('admin-ajax.php'); ?>",
                country_code = $('#billing_country').val();
                var ajax_data = {
                    action: 'append_country_prefix_in_billing_phone',
                    country_code: $('#billing_country').val()
                };
                $.post( ajax_url, ajax_data, function( response ) { 
                    $('#billing_phone').val(response);
                });
            } );
        } )( jQuery );
    </script>
    <?php
}

add_action( 'wp_ajax_nopriv_append_country_prefix_in_billing_phone', 'country_prefix_in_billing_phone' );
add_action( 'wp_ajax_append_country_prefix_in_billing_phone', 'country_prefix_in_billing_phone' );
function country_prefix_in_billing_phone() {
    $calling_code = '';
    $country_code = isset( $_POST['country_code'] ) ? $_POST['country_code'] : '';
    if( $country_code ){
        $calling_code = WC()->countries->get_country_calling_code( $country_code );
        $calling_code = is_array( $calling_code ) ? $calling_code[0] : $calling_code;
    }
    echo $calling_code;
    die();
}

Nice piece of code, Unfortunately the number is not showing in the order page.

need also shipping

on the frontend it seems to work. but once the order is placed it rewrites the country phone code over it. So you only see +31 for example in the backend order page. Can you look into this? Love the clean way you implemented this functionality. Looking forward to your reply.