В таблице генерируется в два раза больше строк чем нужно

Здравствуйте. Есть функция, которая вставляет в таблицу строки и ячейки, но она вставляет всегда в два-три раза больше строк и ячеек чем нужно. Как исправить ту ситуацию?

Вот как выглядит код пустой таблицы:

<table id="myTable" class=""></table>

Вот функция, которая генерирует строки и ячейки:

function makeTable(){
  var table = document.getElementById('myTable');
  for (var cols = 0; cols < 2; cols++) {
    var tr = document.createElement('tr');
    table.appendChild(tr);
     for (var rows = 0; rows < 2; rows++) {
      var td = document.createElement('td');
      tr.appendChild(td);
     }
  }
      return table;
}

function makeTable() { 
 
  var table = document.getElementById('myTable'); 
 
  for (var cols = 0; cols < 2; cols++) { 
    var tr = document.createElement('tr'); 
    table.appendChild(tr); 
 
    for (var rows = 0; rows < 2; rows++) { 
      var td = document.createElement('td'); 
      tr.appendChild(td); 
    } 
  } 
  return table; 
} 
makeTable();

td { 
  border: 1px solid black; 
  width: 20px; 
  height: 20px; 
}

<table id="myTable" class=""></table>