克隆并最大化div

Question

我有一个带有div的html页面，当我最大化另一个div的移动时，但是我希望所有的div保持在他们的位置并将点击的div（最大化的一个）放在前面其他人。

function changeSize(id, weight, height){
    var elem = document.getElementById(id);
    if(elem.getAttribute('style')){
        elem.removeAttribute('style');
    } else {
        elem.style.width = weight + 'px';
        elem.style.height = height + 'px';
        elem.style.fontSize = '30px';
    }
}

var elems = document.getElementsByClassName('kaesten');
for(var i = 0; i < elems.length; i++){
    elems[i].onclick = function(){
        changeSize(this.id, 600, 600);
    }
}

.kaesten{
	width:240px;
	height:300px;
	background-color:darkgrey;
	background-position:center;
	background-repeat:no-repeat;
	text-shadow:0px 0px 3px #000;
	border: 5px solid #F0F8ff;
	vertical-align:top;
	text-shadow: 3px 3px 4px #777;
	float:left;
	margin-left:30px;
}

<div id="box1" class="kaesten">test1</div>
<div id="box2" class="kaesten">test2</div>
<div id="box3" class="kaesten">test3</div>
<div id="box4" class="kaesten">test4</div>

问题：如何克隆点击的div并执行changeSize样式选项？