Edit in JSFiddle

//helpers
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.");
    });

    $(".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.");
    });

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

    return deferred.promise();
};

//jQuery ready...entry point
$(function() {
    $("div").hide();

    $.when(funcStart()).pipe(funcStep1).pipe(funcStep2).done(function(data) {
        var $stepFinal = $("#stepFinal");
        $stepFinal.show();
        $(".output", $stepFinal).html(data);
    }).fail(function(msg) {
        $("#stepFail").show();
        $("#stepFail > .output").html(msg);
    });

});
<div id="stepStart">
<h1>Start</h1>
    <input type="text"/><br/>
    <input class="btnCancel" type="button" value="Cancel"/>
    <input class="btnOk" type="button" value="Go ahead"/>
</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>
h1 {
font-size:14pt;
font-weight: bold;    
}

span {
 font-style:italic;   
}

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