JSFiddle - React, Tailwind, and code Playground

HTML

<div id="x"></div>
<div id="y"></div>

CSS

#x, #y {
    margin: 5px 0;
    border: 1px solid #999;
}

JavaScript

function f10(jq){
    jq.append('<div>f10</div>');
}
function f11(jq){
    jq.append('<div>f11</div>');
}
function f2(jq){
    jq.append('<div>f2</div>');
}
function f3(jq){
    jq.append('<div>f3</div>');
}

var foo1 = $.Deferred();
foo1.then(f10, f11);
foo1.always(f2);
foo1.done(f3)
foo1.resolve($("#x"));

var foo2 = $.Deferred();
foo2.then(f10, f11);
foo2.always(f2);
foo2.fail(f3);
foo2.reject($("#y"));