JSFiddle - React, Tailwind, and code Playground

HTML

<span id="ctrl-x" status="3"></span>

<button id="ctrl1" status="1" pass="1">1</button>
<button id="ctrl2" status="1" pass="1">2</button>
<button id="ctrl3" status="1" pass="1">3</button>

JavaScript

$.checker = function (steps, done){
    function check(el){
        return $.attr(el, 'status') == $.attr(el, 'pass')
    }
    
    (function bind(idx){
        var step = steps[idx];
        $(step.id || step).on('click.checker', function (){
            if( (step.cond || check)(this) ){
                $(this).off('.checker');
                if( ++idx == steps.length ){
                    done();
                } else {
                    bind(idx);
                }
            }
        });
    })(0);
};

$.checker([
      '#ctrl1'
    , { id: '#ctrl2', cond: function (){ return $('#ctrl-x').attr('status') == 2 } }
    , '#ctrl3'
], function (){
    alert('Упражнение выполнено верно');
});