JSFiddle - React, Tailwind, and code Playground

HTML

<script type="text/javascript">
function callSignaSC2(){alert("hola2");}
</script>
<div id="stepStart">
<h1>Start</h1>
    <input type="text"/><br/>
    <input class="btnCancel" type="button" value="Cancel"/>
    <input class="btnOk" type="button" id="moreFieldsButton" value="Go ahead" onclick="callSignaSC2();"/>
</div>

<div id="step1">
<h1>Step 1</h1>
        <input type="text"/><br/>
    <input class="btnCancel" type="button" value="Cancel"/>
    <input class="btnOk" type="button" value="Go ahead"/>    
</div>

<div id="step2">
<h1>Step 2</h1>
        <input type="text"/><br/>
    <input class="btnCancel" type="button" value="Cancel"/>
    <input class="btnOk" type="button" value="Go ahead"/>    
</div>

<div id="stepFinal">
<h1>Congrats you reached the final state!</h1>
    <b>Output:</b><span class="output"></span>
</div>

<div id="stepFail">
    <h1>Failure state</h1>
    <span class="output"></span>
</div>

CSS

h1 {
font-size:14pt;
font-weight: bold;    
}

span {
 font-style:italic;   
}

div {
 display:block;
 padding:5px;        
}

JavaScript

//helpers
function callSignaSC3(){alert("hola2");}
var callSignaSC1=function() {alert("hola1");};
//jQuery ready...entry point

var funcStart = function() {
    var $stepContainer = $("#stepStart");
    $stepContainer.show();

    var deferred = $.Deferred();

   $(".btnCancel", $stepContainer).click(function() {
        $stepContainer.hide();
       deferred.reject("Cancelled in the start step.");
   });

   $(".btnOk", $stepContainer).click(function() {
        $stepContainer.hide();
       deferred.resolve($("input[type=text]", $stepContainer).val());
    });

    return deferred.promise();
};

var funcStep1 = function(data) {
    var $stepContainer = $("#step1");
    $stepContainer.show();
    
    $("input[type=text]", $stepContainer).val(data);

    var deferred = $.Deferred();

    $(".btnCancel", $stepContainer).click(function() {
        $stepContainer.hide();
        deferred.reject("Cancelled in step 1.");
    });
 deferred.reject("Cancelled in step 1.");
  //deferred.resolve($("input[type=text]", $stepContainer).val());
  //  $(".btnOk", $stepContainer).click(function() {
  //      $stepContainer.hide();
  //      deferred.resolve($("input[type=text]", $stepContainer).val());
  //  });

    return deferred.promise();
};

var funcStep2 = function(data) {
    var $stepContainer = $("#step2");
    $stepContainer.show();

    $("input[type=text]", $stepContainer).val(data);
    
    var deferred = $.Deferred();

    $(".btnCancel", $stepContainer).click(function() {
        $stepContainer.hide();
        deferred.reject("Cancelled in step 2.");
    });
  deferred.resolve($("input[type=text]", $stepContainer).val());
  //  $(".btnOk", $stepContainer).click(function() {
  //      $stepContainer.hide();
  //      deferred.resolve($("input[type=text]", $stepContainer).val());
   // });

    return deferred.promise();
};

$(function() {
    $("div").hide();
      var $stepContainer = $("#step1");
    $stepContainer.show();
});