[SOLVED] How do I dynamically add (from a .json file) a Square Div with incremental Number while maintaining the Square Div's aspect across the grid container?

How can I get the squares to appear properly across the grid rather than just stretching across it! When the Chapters button is pushed.

The add a Div button is just to show how the squares should appear (obviously the numbers should nicely increment from 1 to 50! not changing all squares to the same number).

*currently with the code below the Chapters button does not retrieve the data properly from the .jason file (I don't know why!)

the link below does retrieve the data properly:

 https://appworx.org/newSQ.html

I very much appreciate anyone's help in providing the simplest solution.

    let BkValues = '{ "Books" : [' +
    '{ "Book":"Chapters" , "id":"1" , "BkChaps":"50" , "LocalRec":"Gen" } ]}';

    const obj = JSON.parse(BkValues);

<script src="https://appworx.org/Chap-Resource-Loader.js"></script>
<!DOCTYPE html>
<html>
<head>

        <meta name="viewport" content="width=device-width, initial-scale=1.0"><script 
        
        src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    
        <script src="https://cdn.jsdelivr.net/npm/underscore@1.13.1/underscore-umd-min.js"></script>
        
        
        <title>NewSquaresList</title>
    
    
        <script src="https://appworx.org/Chap-Resource-Loader.js"></script>
            
        
        <script>
        
                var myData;
        
                $.getJSON('https://appworx.org/storage.json', function(data) {
                
                    myData = data;
                
                })
        
        </script>

        

  <style>
  
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 900px) {
  
    .grid {
      margin: auto;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-gap: 10px;
      width: 600px;
    }
    .grid .grid-item {
      background-color: #e0e0e0;
      padding: 10px;
      height: 170px;
      font-size: 40px;
      text-align: center;
      line-height: 170px;
      
      -webkit-user-select: none; /* Safari */
      -ms-user-select: none; /* IE 10 and IE 11 */
      user-select: none; /* Standard syntax */
    }
    
 }   
    
/* Larger screen (portrait tablets and large phones, 900px and up) */
@media only screen and (min-width: 900px) {
  
    .grid {
      margin: auto;
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      grid-gap: 10px;
      width: 900px;
    }
    .grid .grid-item {
      background-color: #e0e0e0;
      padding: 10px;
      height: 150px;
      font-size: 45px;
      text-align: center;
      line-height: 150px;
      
      -webkit-user-select: none; /* Safari */
      -ms-user-select: none; /* IE 10 and IE 11 */
      user-select: none; /* Standard syntax */
    }
    
  }  
    
/* Largest screen (desktop, 1600px and up) */
@media only screen and (min-width: 1600px) {
  
    .grid {
      margin: auto;
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      grid-gap: 10px;
      width: 1200px;
    }
    .grid .grid-item {
      background-color: #e0e0e0;
      padding: 10px;
      height: 140px;
      font-size: 45px;
      text-align: center;
      line-height: 140px;
      
      -webkit-user-select: none; /* Safari */
      -ms-user-select: none; /* IE 10 and IE 11 */
      user-select: none; /* Standard syntax */
    }
    
  }  
    
  </style>
</head>
<body>

<br>

<div class="likes" >0</div>

<br>
<br>
<button id="1" class="book" >Chapters</button><br><button id="btn_add" class="btn">Add a Div</button><br><button hidden class="btn" >Increment</button>
<br>

<div id="header" class="text" >Chapters</div>
<div id="header2" class="text" ></div>

<br>

  <div id="grab" >X</div>   <div hidden id="LocRec2" >X</div>   <div hidden id="Rec" >X</div>

  <div id="books" class="grid" ></div>

  <div id="board" class="grid" ></div>

<br><br><br>

  <div class="grid" id="myGrid"></div>

  <script>
  

    
    
    
// This is set with a click...
$("#btn_add").click(function(e) {


    var times = 3;

    for(var i = 0; i < times; i++){
    
    }


    $("#board").append("<div class='grid-item' class='likes' >0</div>");


});
    


$(".book").on("click", function(){
  
    //console.log(this.id);   //This is the book #
    
    var name = this.innerHTML;
    var Bkid = this.id;
    
    var num = this.id-1;
    
    //console.log( num );
    
    //alert(id);
    
    document.getElementById("grab").innerHTML = Bkid ;
    
    document.getElementById("header").innerHTML = name ;
    
    document.getElementById('books').style.display = 'none';
        
    
        //document.getElementById('header2').style.display = 'none';
        
    window.location.href = "#start";
        
    document.getElementById('board').style.display = 'block';


        var LocRec = obj.Books[num].LocalRec;   // LocRec will = Gen
            
                //console.log( myData.Books.GenRec );
                
         var LocRec2 = LocRec + "Rec";
                
         document.getElementById('LocRec2').innerHTML = LocRec2;
                

                
         var varKey = LocRec2;
                
        var Rec = myData.Books[varKey];    // This is the cool bit of code that refers to the key dynamically


                
         console.log( Rec );
                                
                                    

        var Chap = obj.Books[num].BkChaps;
            
        var times = Chap;
    

        for(var j = 0; j < times; j++){
    
        var num = j +1;
                                
                                
        var string = LocRec+num ;   // This is the dynamic string ref to:  Gen1
                                
                
        if (Rec.includes(string) == true) {
                                    
        
                
        console.log( "Yes, is in array" );
                    
        $("#board").append("<div class='grid-item' class='square highlight' class='number'>" + num + "</div>");

        /* gridContainer.appendChild(gridItem); */

                
        } else {
                
        console.log( "No, is not in array" );
        
        /* $("#board").append("<div class='grid-item'></div>"); */

                    
        $("#board").append("<div class='grid-item' class='square' class='number'>" + num + "</div>");

                
        }
            
                
    }

});


$('.btn').click(function() {
  var num = parseInt($('.likes').text());
  $('.likes').text(num+1);
  $('.grid-item').text(num+1);
});


    
  </script>
  </body>
  </html>

This is what currently happens when the Chapters button is clicked... the Squares do not maintain their aspect but just stretch and fill the width.