Назначить набор классов для таблицы HTML, созданной в JavaScript

Question

Я пытаюсь использовать JavaScript для создания таблицы на основе количества строк в одной таблице и количества столбцов в другой. При этом я хочу назначить таблице пару идентификаторов div и идентификатор таблицы, чтобы сгенерированная таблица располагалась в правой части таблицы моих сотрудников.

Моя проблема в том, что, когда я таким образом создаю таблицу в JavaScript, я теряю полосы прокрутки для осей x и y таблицы, и она появляется под таблицей сотрудников. Прокрутка таблицы затем выполняется с помощью прокрутки окна вместо того, чтобы таблица была установлена ​​и прокручивалась сама. Я все еще новичок в HTML и JavaScript, и я не могу найти, где я иду не так, как надо. Вот мой код и JSFiddle для пояснения:

            var rows = document.getElementById('dayRow').getElementsByTagName("td").length;
            var cols = document.getElementById('employeeCol').getElementsByTagName("tr").length;
            var myTable = document.createElement('table');
            myTable.classList.add("tableTasks");
            var tr1 = null;
            var td1 = null;
            var text1 = null;
            for(let i = 0; i < rows; i++) {
              tr1 = document.createElement('tr');
              for(let j = 0; j < cols; j++) {
                td1 = document.createElement('td');
                text1 = document. createTextNode('cell');
                td1.appendChild(text1);
                tr1.appendChild(td1);
              }
              myTable.appendChild(tr1);
            }
            document.body.appendChild(myTable);

    .tableTasks {
      width:100%;
      margin-top:5px;
      empty-cells: show;
      height:1000px;
      line-height: 35px;
      width: 100px;
    }
    
    #table-wrapper-tasks {
      position: relative;
      width:81%;
      float:right;
    }
    
    #table-scroll-tasks {
      overflow-x: scroll;
      overflow-y: scroll;
      max-height: 522px;
    }

    <div id="table-wrapper-tasks">
        <div id="table-scroll-tasks">
          </div>
        </div>

Я пытаюсь получить что-то вроде прикрепленного изображения.

https://jsfiddle.net/kk05x1cg/#&togetherjs=8kJlzomlvg