Calling PHP function with AJAX

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