how to create a css attribute swapper between two elements?

Question

I'm trying to make two elements exchange their z-index value. Here's what I've got so far:

function zSwapper (beneathElement,underneathElement) {
    var beneathElementZ = $(beneathElement).css('z-index');
    var underneathElementZ = $(underneathElement).css('z-index');

    $(beneathElement).css({'z-index': underneathElementZ});
    $(underneathElement).css({'z-index': beneathElementZ});
}

But it doesn't seem to work, because once I change the first element z-index, the second takes that value instead of the one it had in the begining. So, both elements end up having the same z-index, instead of exchanging their values. Is there any way this could be acomplished?

EDIT: Well, as it was pointed below, it seems this actually works: http://jsfiddle.net/xGPx2/2/, so there is some other problem with my code. I hope at least someone finds this useful.

Answer 1

Your code should work fine, maybe it's more css related?
I tested your code, see jsFiddle