JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <div id="r" class="column">
        <img id="e" class="hpbox" src="http://s13.postimg.org/75tab4jpz/placeholder.png" />
        <img id="er" class="hpbox" src="http://s13.postimg.org/75tab4jpz/placeholder.png" />
        <img id="eri" class="hpbox" src="http://s13.postimg.org/75tab4jpz/placeholder.png" />
    </div>
    <div id="re" class="column">
        <div id="s" class="popu">
            <img class="tri" src="http://s18.postimg.org/p2y0wa96d/triwhite.png" />
        </div>
        <img id="hah" class="hpbox" src="http://s13.postimg.org/75tab4jpz/placeholder.png" />
        <img class="hpbox" src="http://s13.postimg.org/75tab4jpz/placeholder.png" />
        <img id="ci" class="hpbox" src="http://s13.postimg.org/75tab4jpz/placeholder.png" />
    </div>
    <div id="ret" class="column">
        <img id="cia" class="hpbox" src="http://s13.postimg.org/75tab4jpz/placeholder.png" />
        <img id="ciar" class="hpbox" src="http://s13.postimg.org/75tab4jpz/placeholder.png" />
        <img id="ciarl" class="hpbox" src="http://s13.postimg.org/75tab4jpz/placeholder.png" />
    </div>
</div>

CSS

.popu {
    height:92px;
    width:200px;
    background-color:#ffffff;
    border-radius: 5px 5px 5px 5px;
    position:absolute;
    margin-top:2px;
    margin-left:2px;
}
.popufl {
    height:92px;
    width:200px;
    background-color:#ffffff;
    border-radius: 5px 5px 5px 5px;
    position:absolute;
    margin-top:2px;
    margin-left:14px;
}
.tri {
    height:55px;
    position:absolute;
    margin-top:17px;
    margin-left:-18px
}
.trifl {
    height:55px;
    position:absolute;
    margin-top:17px;
    margin-left:190px
}
.hpbox {
    height:96px;
    margin-left:8px;
    margin-bottom:4px;
}
.menusp {
    padding-left:45px;
}
.hd {
    position:absolute;
    height:25px;
    margin-top:1px;
}
.column {
    float:left;
    width: 104px;
}
html {
    background-color:#045662;
}
#e {
    cursor: pointer;
}
#hah {    
    cursor: wait;
}

JavaScript

$(document).ready(function () {
    var inProgress = false;
    $("#s").hide(0);

    $("#e").click(function (e) {
        if(!inProgress) {
          //  inProgress = true;
        //done
        $("#re").animate({
            "margin-top": "104px"
        }, 800);
        $("#ret").animate({
            "margin-top": "104px"
        }, 800);
        $(".popu").animate({
            "margin-top": "-102px"
        }, 800);
            $("#s").show(200, function() {
               // inProgress = false;
            });
        e.stopPropagation();


        $("body").click(function (e) {
            if (!$(e.target).hasClass('popu')) {
                $(".popu").animate({
                    "margin-top": "0px"
                }, 800);
                $("#s").hide(200);
                $("#re").animate({
                    "margin-top": "0px"
                }, 800);
                $("#ret").animate({
                    "margin-top": "0px"
                }, 800);



            }
        });
        }
    });

    // Second animation  
    $("#hah").click(function () {
        if($("#re").is(':not(:animated)') && $("#ret").is(':not(:animated)') && $(".popu").is(':not(:animated)') && $("#s").is(':not(:animated)')) {
       // if(!inProgress) {
            inProgress = true;
        //done
        $("#r").animate({
            "margin-left": "104px"
        }, 800);
        $("#e").animate({
            "margin-top": "104px"
        }, 800);
        $("#ret").animate({
            "margin-top": "104px"
        }, 800);
        $(".popu").animate({
            "margin-left": "106px"
        }, 800);

        $("#re").animate({
            "margin-left": "-208px"
        }, 800);
        $("#s").show(200, function() {
                inProgress = false;
            });
        }
    });


});