JSFiddle - React, Tailwind, and code Playground

HTML

<div id="mainDiv">
    <p id="mainP">Here go the main div contents</p>
</div>
<button id="mainButton">Click Me!</button>

CSS

#mainDiv {width:400px; height:300px; background-color:white; border:1px solid blue; text-align:center; padding:20px 0;}

JavaScript

$(document).ready(function() {
    window.prevText = $("#mainP").text(); //create a global variable with the existing contents of the div
    $("#mainButton").click(function(){ //when we click the button,
        $("#mainDiv").empty(); //empty any existing contents of the div
        $("#mainDiv").css("background-color", "lightgrey"); //change the div's background color
        
        //now we create a basic loop
        for (var i = 0, limit = 10; i < limit; i++){ //count from 1 to 10
            setTimeout(function() { //induce a time delay
                i=i-1; // count down from 10 to 1
                $("#mainDiv").append( "<br />Step: " + i ); //display each row of the count-down
                if (i==0){ //when we reach 0,
                    jobDone(); //execute this function
                }    
            }, 500 * i ); //time delay 500 mS (0.5 sec)
        }
    });
    function jobDone() { //when countdown is done,
        alert("Done"); //alert
        $("#mainDiv").css("background-color", "white"); //restore the original background color
        $("#mainDiv").text(""); //empty contents of div
        $("#mainDiv").html("<p>"+prevText+"</p>"); //restore the initial content of the div
    }
});