jQuery – z-index操作和自动值而不是数字

当您添加新按钮时,jQuery会将新的可翻转DIV插入到CONTAINER中.当我点击其中一些DIV时,我想更改z-index值.但是jQuery无法将z-index值作为数字.它只显示’自动’…是否有解决方案显示真正的z-index值并将其增加1？

jsfiddle示例 – http://jsfiddle.net/ynternet/84nVQ/10/

HTML

<div id="add" style="BACkground:yellow; width:100px;"> add new </div>
<div id="container"> </div>

jQuery的

function handler() {
    if ($(this).find("#menu").length) {
        return;
    }
    var currenTindex = $(this).css('z-index');
    alert(currenTindeX);
    var newIndex = currenTindex + 1;
    alert(newIndeX);
    $(this).css('z-index',newIndeX);
}
$("#add").on({
    click: function(E) {
        var timestamp = Date.Now();
        var posx = Math.floor(Math.random() * 400);
        var posy = Math.floor(Math.random() * 400);
        $('#container').append(function() {
            return $('<div class="add_to_this" id="' + timestamp + '" style="left:' + posx + 'px; top:' + posy + 'px; ">Click me,drag a change z-index</div>').click(handler).draggable({
                containment: "#container",scroll: false,cursor: 'lock'
        });
    });
    }
});

CSS

#container {
    width:500px;
    height:500px;
    BACkground: palegoldenrod;
    position: relative;
    top:20px;
    left: 100px;
    padding: 0px;
}
.add_to_this {
    padding:5px;
    BACkground:yellowgreen;
    position: absolute;
    display:inline-block;
    width:200px;
    height:50px;
    -moz-user-SELEct: none;
    -khtml-user-SELEct: none;
    -webkit-user-SELEct: none;
    user-SELEct: none;
    -o-user-SELEct: none;
}