Is it possible to implement a start and next button in JavaScript?

Question

I have a JavaScript animation made mostly with plain JavaScript.

   var step = 0;

        function start() {
            step = 1;
            doStep();
        } 

        function next() {
            step++;
            doStep();
        }

        function previous() {
            step--;
            doStep();
        }

        function doStep() {
            switch (step) {
                case 1:
                    step1();
                    break;
                case 2:
                    step2();
                    break;
                case 3:
                    step3();
                    break;
                default:       
                    break;
            }
        }

/*   document.getElementsByTagName('button')[0].addEventListener('click', function() {
        step1();
        step2();
        step3();
        
    }) */
    
    function step1() {
        setTimeout(() =>{
            $("#arrow1").show();
            $("#box").text("1. Device Driver initiates I/O");
            document.getElementById('io-request-box1').style.cssText = 'background-color: white';
            document.getElementById('io-request-box2').style.cssText = 'background-color: red'; 
            document.getElementById("io-request-box2").innerHTML = document.getElementById("io-request-box1").innerHTML;
            document.getElementById("io-request-box1").innerHTML = "";
        }, 1000)    
    }

    function step2() {
        setTimeout(() => {
            $("#arrow1").hide();
            $("#arrow2").show();
            document.getElementById("system-call-box").innerHTML = "System Call" + document.getElementById("io-request-box2").innerHTML;
            document.getElementById('io-request-box2').innerHTML = "";
            document.getElementById('io-request-box2').style.cssText = 'background-color: white';
            document.getElementById('system-call-box').style.cssText = 'background-color: red';
        }, 3000)  
    } 

    function step3() {
        setTimeout(() => {
            $("#arrow2").hide();
            $("#arrow3").show();
            document.getElementById("system-call-box").innerHTML = "System Call";
            document.getElementById("device-driver-box").innerHTML = "Device Driver:" + "   " + "I/O Request";
            document.getElementById('system-call-box').style.cssText = 'background-color: white';
            document.getElementById('device-driver-box').style.cssText = 'background-color: red';
        }, 5000)  
    }

<button class="button is-link" id= "start" onclick="start()">Start </button>
<button class="button is-link" id= "next" onclick="next()"> Next </button>
<button class="button is-link" id= "back" onclick="previous()"> Back </button>

There are 3 steps that are supposed to run after clicking a start button to show a steady animation. This worked with the document.getElementsByTagName('button')[0].addEventListener('click', function()) that I have commented out, and I use the setTimeOut() attributes to slow it down (like an animation).

But, I want to implement a next and eventually a previous button, so I tried to use the switch functions. With this, the next button works only if I get rid of the setTimeOut(), but then the animation doesn't run past the first step when the start button is pressed.

Is there a way around this where I can have both the animation and the next button work?