I am working on a site that has the ability of creating/adding a new element on the page. and I want to have a controll on z-index for each element added on the page. So that I can put a div on top of another div.

```
<div class="element ui-resizable ui-draggable" style="z-index:10000">
  <div id="controller">
    <a href="#" class="zup"> move up </a>
    <a href="#" class="zdown"> move down </a>
  </div>
  <div class="content">
    some text content her
  </div>
</div>

```

javascript

```
$('.zup').click(function() {
  $cur_zindex = $(this).parents('.element').css('zIndex');
  $(this).parents('.element').css({ zIndex: $cur_zindex+1 })
})

$('.zdown').click(function() {
  $cur_zindex = $(this).parents('.element').css('zIndex');
  $(this).parents('.element').css({ zIndex: $cur_zindex-1 })
})

```

the problem on this is when I click multiple times on "move up" of an element, then I also need to click the "move down" multiple times before I can make the current element position at the back. That's because of the gap on z-index when I click multiple times.

In short I want to have a easy way for the user to set the z index, where in no matter how much you click the "move up", then if someone click "move up" on the other element it will automatically position on the top of that multiple clicked zindex/move up

Any suggestions are very welcome.

Thank you