JSFiddle - React, Tailwind, and code Playground

HTML

<div id="log"></div>

JavaScript

function log(text) {
    $("#log").append("<p>" + text + "</p>");
}

function Step1() {
    return $.ajax({
        url: '/echo/json/',
        data: {
            json: { par1: 'another text',
                par2: [3, 2, 'one']}
        },
        beforeSend: function() {log("Step1 starting");},
        success: function(){log("Step1 was successful");},
        error: function(){log("Step1 was unsuccessful");},
        complete: function(){log("Step1 is complete");},
    });
}

function Step2() {
    return $.ajax({
        url: '/echo/json/',
        data: {
            json: { par1: 'another text',
                par2: [3, 2, 'one']}
        },
        beforeSend: function() {log("Step2 starting");},
        success: function(){log("Step2 was successful");},
        error: function(){log("Step2 was unsuccessful");},
        complete: function(){log("Step2 is complete");},
    });
}

function Step3() {
    return $.ajax({
        url: '/echo/json/',
        data: {
            json: { par1: 'another text',
                par2: [3, 2, 'one']}
        },
        beforeSend: function() {log("Step3 starting");},
        success: function(){log("Step3 was successful");},
        error: function(){log("Step3 was unsuccessful");},
        complete: function(){log("Step3 is complete");},
    });
}
log("Expected:");
log("Step1 starting");
log("Step1 was successful");
log("Step2 starting");
log("Step1 is complete");
log("Step2 was successful");
log("Step3 starting");
log("Step2 is complete");
log("Step3 was successful");
log("Step3 is complete");

log("<br/>");
log("Actual: ");
Step1().then(Step2).done(Step3);