remove Div and appear it another place

remove Div and appear it another place

I would like 4 divs to appear. When I click any of the divs, I would like
that div to move to the end.
So, for example, if the first div is clicked, it should become the last div.
The HTML:
<a href='#'><div id="pop0" class="pop"></div></a>
<a href='#'><div id="pop1" class="pop"></div></a>
<a href='#'><div id="pop2" class="pop"></div></a>
<a href='#'><div id="pop3" class="pop"></div></a>
The CSS:
#pop0 {
width: 100px;
height: 100px;
background: yellow;
position: relative;
}
#pop1 {
width: 100px;
height: 100px;
background: red;
position: relative;
}
#pop2 {
width: 100px;
height: 100px;
background: blue;
position: relative;
}
#pop3 {
width: 100px;
height: 100px;
background: green;
position: relative;
}
The jQuery:
var id = "pop0";
$(".pop").bind('click', function(){
var oldId = $(this).attr('id');
$(this).attr('id', id);
id = oldId;
})
Demo