I am creating a plugin for wordpress for the backend. I when the admin press a button a js function is being called. In this js function, I am calling an API, and then I want to call a PHP with the result and the order id as a parms. so I have done this: action.php

function openpopup($order_id)
{
  

    ?>  
    <button id="shipping360_create_delivery" data-id= "<?php echo $order_id?>" 
            style="background-color: #2e4453; color:#fff; border-radius: 5px;text-align: center;width:100px;height:auto;font-size:10px; line-height: 1.5em;  border: none;-webkit-appearance: none; outline: none; padding:10px;cursor: pointer;">create</button>
    <?php
            popup($order_id);

   
}


add_action('wp_ajax_update_order', 'update_order');


function update_order()
{    


    $order_id = isset($_POST['id']) ? $_POST['id'] : 0;
    $shipping_number = isset($_POST['shipping_num']) ? $_POST['shipping_num'] : "";
    $order = wc_get_order($order_id);

    update_post_meta($order_id, 'shipping_number', $shipping_number);
    $order->add_order_note($shipping_number);
    die();


}

the popup function opens a pop-up with the order details. inside the popup function I have a button with the id "create_order" (this function has a lot of HTML and doesn't really matter - the point is the button). Now for the app.js file

(function ($) {
 $(document).ready(function () {
        $('#close').click(function () {
//this is closing the pop-up
            document.body.style = "overflow: scroll";

            $('#order-model').hide();
        });
        $("#createorder").click(function () {
/// this is the call for the main function 
            createDelivery();
        });

        $("#shipping360_create_delivery").click(function () {
// this is opening the pop-up
            $('#order-model').show();
            document.body.style = "overflow: hidden;margin: 0;";

        })
    })
}(jQuery)); 



function createDelivery() {
    // creates new delivery

    const URL = BASE + "/shipping";

    const distributor = document.getElementById("distributor").value;
    const token = document.getElementById("ordertoken").innerHTML;
    const companyid = document.getElementById("ordercompanyid").innerHTML;
    const direction = "1";
    const type = document.getElementById("ordertype").innerHTML;
    const order_id = document.getElementById("ordernumber").innerHTML;

    if (distributor == "") {
        alert("Please fill all fields")
    }

    else {
        senderinfo = "";//have data -- does not really matte
        receiverinfo = ""; // have data -- does not really matter
        const Data = {
            senderinfo: senderinfo,
            receiverinfo: receiverinfo,
            type: type,
            distributor: distributor,
            companyid: companyid,
            token: token,
            direction: direction
        }
        const otherPram = {
            headers: { "Content-Type": "application/json; charset=UTF-8" },
            body: JSON.stringify(Data),
            method: 'POST'
        };
        console.log(URL)
        fetch(URL, otherPram)
            .then(data => {
                return data.json()
            })
            .then(res => {
                body = res["body"];
//////////////////-----------------------///////////////////////////////
up to this point everything is working fine
                (function ($) {
                    $.ajax({
                        type: "POST",
                        url: ajaxurl,
                        cache: false,
                        data: {
                            'action': 'update_order',
                            'id': order_id,
                            'shipping_num': body,
                        },
                        success: function (response) {
                            location.reload();
                            alert(response);

// not popping up
                        },
                        fail: function () {
                            alert("helllo");

// I have put this and the one below just for checking 
// not popping up
                        },
                        complete: function () {
                            alert("hiii")
// when I call my function this is that only on the pops up
                        }
                    });
                })(jQuery);


            }).catch(function (error) {
                alert("Got an error:", error);


            });


    }

}

Thanks for the help