Javascript-форум - Заполнение таблицы массивом

Здравствуйте. Впервые по учёбе сталкиваюсь с JavaScrip, поэтому очень мало что в нём понимаю. Имею задание и кусочки кода, в результате объединения и дописывания которых должно получиться следующее:

Но у меня получается выводить лишь пустые клетки, как только я пытаюсь заполнить их цифрами из массива - не выводится ничего.
Вот мой код:

<!DOCTYPE html>
    <html lang="uk">
        <head>
            <meta charset="UTF-8">
            <title>JS Игра</title>
                <style>
                    #game td {
                    width: 50px; /* ширина клетки*/
                    height: 50px; /* высота клетки */
                    border: 1px solid black; /*рамка вокруг клеток*/
                    text-align: center; /*выравнивание тексту в клетке*/
                    cursor: pointer; /*смена курсора над клеткой*/
                    }
                   .active {
                    background-color: lightgreen;
                    }
                </style>
                <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>        
        </head>
        <body>
            <div id="game">
                <table class="field">
                </table>
            </div>
            <script>



                function drawGameFields(size) {
                    var field = $('.field');
                    var from = 1;
                    var to = Math.pow(size, 2);
                    var arr = [];
                    arr = createArr(from, to);
                    createCells(arr, size, field);
                }

                function createArr(from, to) { //создаём массив чисел
                    var arr = [];
                    for (var i = from; i <= to; i++) {
                    arr.push(i); //добавляем к массиву число
                    }
                    arr.sort(function compareRandom(a, b) { // перемешиваем массив
                    return Math.random() - 0.5;
                    });
                    return arr; // возвращаем готовый массив
                }

                function createCells(size, elem, arr) {
                    elem.html(function(index, element) {
                    var content = '';
                    var e = 0; //начальный индекс массива
                    for (var i = 0; i < size; i++) {
                    content += '<tr>';
                    for (var j = 0; j < size; j++) {
                    content += '<td>' + arr[e] + '</td>'; // добавляем число
                    e++; // увеличиваем индекс массива
                    }
                    content += '</tr>';
                    }
                    return content; //возвращаем построенное поле
                    });
                }

                var startSize = 3;
                drawGameFields(startSize);

            
            </script>
        </body>
    </html>