JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.0.1/raphael-min.js"></script>
<div id="out">
</div>

JavaScript

var paper=Raphael("out",320,200);
var box=paper.rect(50,50,30,30);
var lx=0;
var ly=0;
//just to have placement
var bx=box.getBBox().x;
var by=box.getBBox().y;
var pset=paper.set();
for (var i=0;i<6;i++) {
   //place a box to randmom place;
   var newbox=paper.rect(Math.round(Math.random()*100),Math.round(Math.random()*100),10,10);
    //translate it once to be sure that it is not because it was translated
    newbox.translate(10,10);
        pset.push(newbox);
       
}
//set here i<2 to see a problem
for (var i=0;i<1;i++) {
    //place items in rows;
for (var nn in pset.items) {
    //new placement calculate;
       var nx=bx+lx*32;
       var ny=bx+ly*32;
       var cb=pset[nn];
    //here the problem ! 
    //if called second time the returnded bbx looks incorrect
       var bbx=cb.getBBox();
    //calculate translate coordinates
       var tx=nx-bbx.x;
       var ty=ny-bbx.y;
    //translate item
       cb.translate(tx,ty);
    //shift it to front
       cb.toFront();   
    //calculate row/col    
       lx++;
    if (lx>=2) {lx=0;ly++}
}       
}