How to draw a grid view with static columns

i got grid view with dynamic columns like this ,the columns are changed according to user input of dates. and i got row names as follows

i use the following to output the following rows and columns.

<table class="table table-bordered" id="Tablev">
  <tr input type="hidden" id="trr">
    <th>
  </tr>
  <tr></tr>
  <tr>
    <th>
      <input type="hidden" id="date" style="display:none;" @*value="2019-12-02"*@ class="th-hidden-date" />
    </th>
  </tr>
</table>
<div class="col-sm-2">
  <input type="submit" value="Seach" id="ajaxCall" class="btn btn-primary form-control" />
</div>
<br />

for (var i = 0; i <= days; i++) {
  var input = `<input type="hidden" id="date" value=${result1[i]} class="th-hidden-date" />`
  $('<td>' + result1[i] + input + '</td>').appendTo($('#trr'));
}
$.each(Item1, function (index, item) {
  $('<tr>' +
    '<th>' + item.itemname + '</th>' + '</tr>').appendTo($('#Tablev'));
  var hiddenValues = [];
  $('#Tablev').find('input:hidden').each(function () {
    item[$(this).val()];
  });
});

'' + item.itemname + '' + '').appendTo($('#Tablev')); creates the Row names(allocated,out of order etc). result1[i] creates the columns dynamically.

this part calculates the the values for the according row and column item[$(this).val()]; eg values (1,2,3,4).

But i want to create the table as follows 1.the dates should be created dynamically 2.and then the eg(allocated)should be created and the values should be printed in the grid with the particular date and after the last day it should move to the next row with(Out of order) and print the values. in this case [allocated] [1] [2] [3] and then it should be moved to [out of order] [4] [] []It should go row by row but in my code it goes as 1.Columns then the row names

Actually im pretty new to these so how can i achieve this thing.