JSFiddle - React, Tailwind, and code Playground

by Pavel Kityan

HTML

Set maximum z-index to
<input type="button" value="div1_1" />
<input type="button" value="div2_1" />
<input type="button" value="div2_2" />
<br />
<br />
<div id="div1">
    <div id="div1_1"></div>
</div>
<div id="div2">
    <div id="div2_1"></div>
    <div id="div2_2"></div>
</div>

CSS

#div1 {
    width: 200px;
    height: 200px;
    background: red;
    position: absolute;
}
#div2 {
    width: 200px;
    height: 200px;
    background: blue;
    position: absolute;
    margin-top: 200px;
}
#div1_1 {
    width: 300px;
    height: 300px;
    border: 10px solid yellow;
    position: absolute;
}
#div2_1 {
    width: 300px;
    height: 300px;
    border: 10px solid brown;
    position: absolute;
}
#div2_2 {
    width: 300px;
    height: 300px;
    border: 10px solid pink;
    position: absolute;
}
.top {
    z-index: 100;
}

JavaScript

/*
// можно через классы

$(function () {
    $('input').on('click', function () {
        $('div').removeClass('top');
        $('#' + $(this).val()).addClass('top');
    });
});

// можно  инлайн 

$(function(){
    $('input').on('click', function(){
        $('div').css('z-index', '');
        $('#' + $(this).val()).css('z-index', 100);
    });
});
*/


$(function () {
    $('input').on('click', function () {
        var divs = $('div');
        for (var j = 0, qty = divs.length; j < qty; j++){
            $(divs[j]).css('z-index', j + 1);
            console.log($(divs[j]));
        }
        $('#' + $(this).val()).css('z-index', 100);
    });
});