Make a function that creates a grid

The idea is:

  • a random number, “lets say 4000”
  • I have limited space defined by a function
  • I want to change the properties of a class to fit these parameters
  • i want to make 4000 boxes fit in the parametrized scope
  • and i want to alternate color on click

I’m stuck at generating the ‘div’ boxes. Any help would be greatful;

$(document.body).on('click', 'span', function (e) {

    $(this).addClass('color');

    // 1) squares can be either white, yellow or purple.
    // 2) if a square is yellow and it's clicked on, it turns purple and visa versa
    
    /* 3) there needes to be an enumeration of quadrants
        and there needs to be at least four of them...
    */
    
    // ajecent squares can only be clicked on based on initial pattern... 
    // then 
     
});
div {
}
span {
    height: 2em;
    width: 2em;
    border: solid 1px lightGray;
    display: inline-block;
}
span.color {
    background: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<!-- code block -->
<div>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
</div>
<div>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
</div>
<div>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
</div>
<div>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
</div>
<!-- code block -->
<div>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
</div>
<div>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
</div>
<div>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
</div>
<div>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
</div>
<!-- code block -->
<div>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
</div>
<div>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
</div>
<div>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
</div>
<div>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
</div>
<!-- code block -->
<div>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
</div>
<div>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
</div>
<div>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
</div>
<div>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
</div>