JSFiddle - React, Tailwind, and code Playground

by Riccal

HTML

<a href="#" id="add">add element</a>
<div id="elements">
    <div class="element ui-draggable">
      <div class="controller">
        <a href="#" class="top">⇈</a>
        <a href="#" class="zup">+</a>
        <a href="#" class="zdown">-</a>
        <a href="#" class="bottom">⇊</a>
      </div>
      <div class="content">lorum ipsum</div>
      <div class="zIndex"></div>
    </div>
</div>

CSS

.element {
    background-color:lightblue;
    border:1px solid darkblue;
    width:96px;
    height:96px;
    padding:2px;
    z-index:0;
}

.content {
    margin-top:4px;
}

.controller a {
    margin:0 4px;
    text-decoration:none;
}

.zIndex {
    position:absolute;
    right:0;
    bottom:0
}

JavaScript

$('#add').on('click', function() {
    var $clone = $('.element:first')
                 .clone()
                 .attr('id', 'e' + $('.element').length++)
                 .draggable();

    $('#elements').append($clone);
    return false;
});

$('#elements').on('click', 'a', function() {
    var $element = $(this).closest('.element');
    var $siblings = $element.siblings();
    var zIndexes = $siblings.map(function() {
        return $(this).css('z-index');
    });

    var zIndex = parseInt($element.css('z-index'));

    switch(this.className) {
        case 'top':
            zIndex = Array.max(zIndexes) + 1;
            break;
        case 'zup':
             zIndex += 1;
            break;
        case 'zdown':
            zIndex -= 1;
            break;
        case 'bottom':
            zIndex = Array.min(zIndexes) - 1;
            break;
    }

    // workaround for negative z-index madness (simply set lowest as 0 and raise everything else by 1)
    if (zIndex === -1) {
        zIndex = 0;
        $siblings.each(function() {
            var z = parseInt($(this).css('z-index')) + 1;
            $(this).css('z-index', z);
            $(this).find('.zIndex').text(z);
        });
    }
    
    $element.css({zIndex:zIndex});
    $element.find('.zIndex').text(zIndex);
    return false;
});

$('.element').draggable();

Array.max = function(array) {
    return Math.max.apply(Math, array);
};

Array.min = function(array) {
    return Math.min.apply(Math, array);
};