почему при клике отрисовывает новый блок в игре пятнашки

Я делаю игру пятнашки. Когда я просто использую html и js, я генерирую элементы динамически и нажимаю на каждый из них, выбранная клетка передвигается на свободное место, все работает хорошо, но когда я подключил webpack, она перестала работать. Я переписал функцию showTable используя createElement вместо конкатенации. И теперь у меня при нажатии отрисовывает ещё одну таблицу с пятнашками, а не меняет положение нажатой кнопки. Я не понимаю почему. Как я могу это исправить? Пожалуйста, помогите мне заставить этот код работать. Вот мой полный код https://codepen.io/tomas777/pen/abZjZav?editors=1111 А вот какой он был изначально(чтобы посмотреть как должно работать) https://codepen.io/tomas777/pen/abZjmZp

function startNewGame() {
  let arrayOfNumbers = new Array();
  let arrayHasNumberBeenUsed;
  let randomNumber = 0;
  let count = 0;
  moves = 0;
  rows = document.getElementById("rows").value;
  columns = document.getElementById("columns").value;
  textMoves.innerHTML = moves;
  arrayForBoard = new Array(rows);
  for (let i = 0; i < rows; i++){
    arrayForBoard[i] = new Array(columns);
  }
  arrayHasNumberBeenUsed = new Array( rows * columns );
  for (let i = 0; i < rows * columns; i++){
    arrayHasNumberBeenUsed[i] = 0;
  }
 for (let i = 0; i < rows * columns; i++){
    randomNumber = Math.floor(Math.random()*rows * columns);
    if (arrayHasNumberBeenUsed[randomNumber] == 0) {
      arrayHasNumberBeenUsed[randomNumber] = 1;
      arrayOfNumbers.push(randomNumber);
    }else 
    {
      i--;
    }
  }
  count = 0;
  for (let i = 0; i < rows; i++){
    for (let j = 0; j < columns; j++){
      arrayForBoard[i][j] = arrayOfNumbers[count];
      
      count++;
    }
  }
  showTable();
}
function showTable() {
    let tbody = document.createElement("tbody");
    document.querySelector('#table').appendChild(tbody);
  for (let i = 0; i < rows; i++) {
    let tr = document.createElement('tr');
    for (let j = 0; j < columns; j++) {
      let cell = document.createElement('td');
      if (arrayForBoard[i][j] == 0) {
        cell.className = 'blank';
      } else {
        cell.className = 'tile';
        cell.onclick = moveThisTile(i, j); 
        cell.innerHTML =arrayForBoard[i][j];
      }
      tr.appendChild(cell);
    } 
    tbody.appendChild(tr);
  } 
};

function moveThisTile(tableRow, tableColumn) {
  if (checkIfMoveable(tableRow, tableColumn, "up") ||
      checkIfMoveable(tableRow, tableColumn, "down") ||
      checkIfMoveable(tableRow, tableColumn, "left") ||
      checkIfMoveable(tableRow, tableColumn, "right") ) {
    incrementMoves();
  } else {
    alert("ERROR: Cannot move tile!\nTile must be next to a blank space.");
  }
  if (checkIfWinner()) {
    alert("Congratulations! You solved the puzzle in " + moves + " moves.");
    startNewGame();
  }
}

function checkIfMoveable(rowCoordinate, columnCoordinate, direction) {
  let rowOffset = 0;
  let columnOffset = 0;
  if (direction == "up"){rowOffset = -1;}
  else if (direction == "down"){rowOffset = 1;}
  else if (direction == "left"){columnOffset = -1;}
  else if (direction == "right"){columnOffset = 1;}  
  if (rowCoordinate + rowOffset >= 0 && columnCoordinate + columnOffset >= 0 &&
    rowCoordinate + rowOffset < rows && columnCoordinate + columnOffset < columns
  ){
    if ( arrayForBoard[rowCoordinate + rowOffset][columnCoordinate + columnOffset] == 0){
      arrayForBoard[rowCoordinate + rowOffset][columnCoordinate + columnOffset] = arrayForBoard[rowCoordinate][columnCoordinate];
      arrayForBoard[rowCoordinate][columnCoordinate] = 0;
      showTable();
      return true;
    }
  }
  return false; 
}
function checkIfWinner(){
  let count = 1;
  for (let i = 0; i < rows; i++){
    for (let j = 0; j < columns; j++){
      if (arrayForBoard[i][j] != count){
    if ( !(count === rows * columns && arrayForBoard[i][j] === 0 )){
      return false;
    }
      }
      count++;
    }
  }  
  return true;
}