<html>
<head>
<style>
.lot{background: blue; padding: 10px}
.lot1{background: green; padding: 10px}
.lot2{background: yellow; padding: 10px}
</style>
</head>
<body>
<div class="lot">
<div class="lot1">
<div class="lot2">
<div>Click here</div>
<div>to iterate through</div>
<div>these divs.</div>
</div>
</div>
</div>
<div class="lot">
<div class="lot1">
<div class="lot2">
<div>Click here</div>
<div>to iterate through</div>
<div>these divs.</div>
</div>
</div>
</div>
<script>
lots=document.querySelectorAll(".lot")
lots2=document.querySelectorAll(".lot2")
f=function(parent){return function(){parent.appendChild(this)}}
for (var i=0; i<lots.length; i++){
lots2[i].onclick=f(lots[i])
}
</script>
</body>
</html>