Address one element after the other while incrementing

$(document).ready(function() {

  function gridBau() {
    for (var rows = 0; rows < 9; rows++) {
      for (var columns = 0; columns < 6; columns++) {
        $("#container").append("<div class='grid'></div>");
      }
      gridCount();//call to add count
    }
    var width = $("#container").css('width');
    var height = $('#container').css('height');
    height = height.slice(0, -2);
    width = width.slice(0, -2);
    $('.grid').css('width', (width / 9));
    $('.grid').css('height', (height / 6));
  }
  gridBau();

  var stopper = $('.grid').length;
 

  function gridCount() {
   var counter = 1;
   //use each to loop through grid
    $(".grid").each(function(index) {  
      $(this).text(counter);
      counter++;

    })
  }

});

#container {
  height: 100vh;
  width: 100%;
  border: solid black 4px;
  box-sizing: border-box;
  overflow: hidden;
}

.grid {
  border: solid rgb(220, 8, 8) 2px;
  display: inline-block;
  box-sizing: border-box;
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
</div>