JSFiddle - React, Tailwind, and code Playground

by verashn

HTML

<div class="area red">lorem</div>
<div class="area orange">lorem</div>
<div class="area yellow">lorem</div>
<div class="area green">lorem</div>
<div class="area blue">lorem</div>
<div class="area navy">lorem</div>
<div class="area purple">lorem</div>

CSS

.area {
    position: absolute;
    width: 100px;
    height: 20px;
    background-color: #000000;
}

.red {
    background-color: red;
}

.orange {
    background-color: orange;
}
.yellow {
    background-color: yellow;
}

.green {
    background-color: green;
}

.blue {
    background-color: blue;
}

.navy {
    background-color: navy;
}

.purple {
    background-color: purple;
}

JavaScript

var n = $(".area").length;

$(".area").click(function(){
    var z = $(this).css("z-index") - n;
    if(z === 0) {
        reset();
    } else {
        $(this).css("z-index", z);
    }
});

function reset() {
    var z = n;
    $(".area").each(function(e) {
        $(this).css("z-index",z);
        z++;
    });
};

reset();