JSFiddle - React, Tailwind, and code Playground

HTML

<div id="left">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
    </ul>
</div>
<div id="right">
    <div id="cm_cube"> </div>
</div>
<a href="#" id="add">Add</a>

CSS

#left{
    width: 50px;
    height: 380px;
    float: left;
}
#right{
    width: 200px,
    height: 380px;
    float: left;
}

JavaScript

function getAddAnim(index){
    var topFinal = (7 - index) * 30;
    var topInit = index == 0 ? (topFinal-100) : (topFinal+30);
    return {
        box: {
            init: { top: topInit + 'px', opacity: 0 },
            final: { top: topFinal + 'px', opacity: 1 },
            delay: 600
        },
        content: {
            init: { top: index == 1 ? '-50px' : '-100px' },
            final: { top: '0px' },
            delay: 900
        }
    };
}

function getRemoveAnim(index) {
    var count = $("#cm_cube").children().length;
    var topInit = (7 - index) * 30;
    var topFinal = topInit - 100;
    if(index+1 == count) {
        return {
            box: {
                init: { },
                final: { top: topFinal + 'px', opacity: 0 },
                delay: 600
            },
            content: {
                init: { },
                final: { top: index == 1 ? '-50px' : '-100px' },
                delay: 900
            }
        };
    }
    else {
        return {
            box: {
                init: { },
                final: { opacity: 0 },
                delay: 600
            },
            content: {
                init: { },
                final: { },
                delay: 900
            }
        };
    }
}

function applyAnim($box, index, anim, cb) {
    // INIT
    $box.animate(anim.box.init, 0);
    $box.find('.b-content').animate(anim.content.init, 0);
    // ANIM
    $box.animate(anim.box.final, 
                 anim.box.delay, cb);
    $box.find('.b-content').animate(anim.content.final, 
                                    anim.content.delay);
}

function addBox() {
    var index = $("#cm_cube").children().length;
    if(index == 8) { return; }
    var $box = $("#cm_box").clone()
                           .removeAttr('id')
                           .appendTo('#cm_cube');
    
    applyAnim($box, index, getAddAnim(index));
    return false;
}

function removeBox(index) {
    var $box = $("#cm_cube...