Dynamically created html table data not showing in order as expected

function CreateWeakHeader(name) {
  var tr = document.createElement('tr');
  var td = document.createElement('td');
  td.classList.add("cal-usersheader");
  td.style.color = "#000";
  td.style.backgroundColor = "#7FFF00";
  td.style.padding = "0px";
  td.appendChild(document.createTextNode(name));
  tr.appendChild(td);

  var thh = document.createElement('td');
  thh.colSpan = "6"; // "31"; Why 31? A week has 7 days...
  thh.style.color = "#FFFFFF";
  thh.style.backgroundColor = "#7FFF00";
  tr.appendChild(thh);

  return tr;
}

function htmlTable(data, columns) {
  var header = document.createElement("div");
  header.classList.add("table-responsive");

  var header2 = document.createElement("div");
  header2.id = "calplaceholder";
  header.appendChild(header2);

  var header3 = document.createElement("div");
  header3.classList.add("cal-sectionDiv");
  header2.appendChild(header3);

  if ((!columns) || columns.length == 0) {
    columns = Object.keys(data[0]);
  }

  var tbe = document.createElement('table');
  tbe.classList.add("table", "table-striped", "table-bordered");
  var thead = document.createElement('thead');
  thead.classList.add("cal-thead");
  tbe.appendChild(thead);

  var tre = document.createElement('tr');
  for (var i = 0; i < columns.length; i++) {
    var the = document.createElement('th');
    the.classList.add("cal-toprow");
    the.textContent = columns[i];
    tre.appendChild(the);
  }

  thead.appendChild(tre);

  var tbody = document.createElement('tbody');
  tbody.classList.add("cal-tbody");
  tbe.appendChild(tbody);

  var week = 0;
  //tbody.appendChild(CreateWeakHeader("Week " + week));

  var tre = document.createElement('tr');
  for (var j = 0; j < data.length; j++) {
    if (j % 7 == 0) {
      week++;
      /* Major changes start here */
      // if the row has cells
      if (tre.querySelectorAll('td').length) {
        // clone and append to tbody
        tbody.appendChild(tre.cloneNode(true));
        // reset table row variable
        tre = document.createElement('tr');
      }
      // then append the Week header
      tbody.appendChild(CreateWeakHeader("Week " + week));
    }

    var td = document.createElement('td');
    td.classList.add("ui-droppable");
    // Set the value of the cell to a clone of the data, if it's an HTMLElement
    // Otherwise, make it a text node.
    var value = data[j] instanceof HTMLElement ?
      data[j].cloneNode(true) :
      document.createTextNode(data[j]);
    td.appendChild(value);
    tre.appendChild(td);
  }
  // If the number of data elements is not evenly divisible by 7,
  // the remainder will be on the row variable, but not appended
  // to the tbody, so do that.
  if (tre.querySelectorAll('td').length) {
    tbody.appendChild(tre.cloneNode(true));
  }

  header3.appendChild(tbe);
  document.body.appendChild(header);
}

$("#tb").click(function() {
  var header = document.createElement("div");
  header.innerHTML = "test";
  var d = [header, header, header, header, header, header, header, header];
  htmlTable(d, days);
});
var days = ['Maandag', 'Dinsdag', 'Woensdag', 'Donderdag', 'Vrijdag', 'Zaterdag', 'Zondag'];

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button type="button" id="tb">CreateTable</button>