JQuery + CSS to swap zIndex of divs

JQuery + CSS to swap zIndex of divs

HTML

<h2>Click to change zIndex</h2><div class="bb red"></div><hr>
<div class="bb blue"></div>
<div class="bb pink"></div>
<div class="bb purple"></div>

CSS

.bb{opacity: 0; z-index:1;position:absolute;left:30px;top:140px;width:50px;height:50px;}

.red{background-color:red;}
.purple{background-color:purple;}
.blue{background-color:blue;}
.pink{background-color:pink;}

JavaScript

$(function() {
var maxz = $('.bb:last').css("zIndex");
alert (maxz);
$(".bb").on("click",function(){
        maxz++;
      $(this).css('z-index',maxz);           
    }
);


 

$('.bb').each(function(i) {
    $(this).delay((i++) * 500).fadeTo(1000, 1).css({"margin-left":i*33, "margin-top":i*5}); })
});