JSFiddle - React, Tailwind, and code Playground

HTML

<div id=board >
    
</div>

CSS

#board
{
 background-color:orange;
 width:400px;
 height:350px;   
}

JavaScript

// initial position
var Top = 15;
var Left = 15;
var tripped = false;

var count= 20;


fillBricks();

// this method will fill the board with bricks

function fillBricks()
{
    var boardHgt =   $("#board").height();
    var boardTop =  $("#board").offset().top  
    var boardBtm = boardHgt + boardTop;    
    
for( var i =0; i< count; i++)
{
    
        $("#board").append( createBrick(Top, Left) );  
    
    var brickHgt = $(".bricks").height() ;
    var brickTop = $(".bricks:last").offset().top ;
    var brickBtm = brickHgt + brickTop;
    
     Top = brickBtm; 
        
    if(! tripped)
    {  
       // div boundary protection 
        if( brickBtm + 25 > boardBtm)
        {
            Top =15;
            Left = Left +40; 
            tripped= true;
        }
      }
    else  // reset protection
        tripped = false;
}
  
}

// this is the marker
function createBrick( top, left )
{    
    
    return $("<div style='border:2px solid #000;width:30px;height:30px;top:"+top+"px;left:"+left+"px;background-color:red;position:absolute'  class='bricks' >  </div>");
    
}


$(document).ready( function() {
   $(".bricks").click(function(){
      var index = $(".bricks").index(this);
       
       alert("brick  "+index);
   });
    
});