JSFiddle - React, Tailwind, and code Playground

HTML

<input type="submit" class="submit_button"></input>

JavaScript

$(".submit_button").click(function () {
    popupMessage();
    sendData(); //the ajax calls are all in here
    console.log("1-calling reload!");
    location.reload();
});

$(document).bind("ajaxSend", function () {
    console.log("waiting for all requests to complete...");
    // ajaxStop (Global Event)
    // This global event is triggered if there are no more Ajax requests being processed.
}).bind("ajaxStop", function () {
    console.log("completed now!");
    location.reload();
});

function popupMessage() {
    alert("Pop!");
}

function sendData() {
    //a bunch of these:
    $.ajax({
        "dataType": "text",
            "type": "POST",
            "data": "temp",
            "url": "your url here!",
            "beforeSend": function (msg) {
                console.log("1-sending...");
            },
            "success": function (msg) {
            console.log("1-success!");
            sendData2(); // again
        },
            "error": function (msg) {
            console.log("1-error!");
        }
    }).done(function (msg) {
        console.log("1-done!");
    });
}

function sendData2() {
    //a bunch of these:
    $.ajax({
        "dataType": "text",
            "type": "POST",
            "data": "temp",
            "url": "your url here!",
            "beforeSend": function (msg) {
                console.log("2-sending...");
            },
            "success": function (msg) {
            console.log("2-success!");
            
        },
            "error": function (msg) {
            console.log("2-error!");
                sendData2(); // again
        }
    }).done(function (msg) {
        console.log("2-done!");
    });
}