Таблица сложения с javascript

Сыну задали в школе таблицу сложения, я придумала сделать программу, чтобы ему было легче запомнить примеры. Да, я знаю, что существует куча подобных программ, но я хочу сделать сама. Задачу я задала себе такую. Примеры собраны в массив.
Программа должна случайно выводить один из примеров без ответа, ребенок вводит ответ, если правильно, программа пишет "Молодец", и выводит новый пример, если неверно, пишет "Попробуй еще раз", оставляет тот же пример. Также там есть счетчики верных и неверных ответов. Проверок на нечисловые значения добавлять не буду.
Структура файлов:

index.html
css(папка)
        mystyle.css
js(папка)
        jquery.js
        table.js

index.html - простой html файл,

<div class="box">

<p id="line"></p>

<p id="status"></p>

<p id="trueAnswer"><small>Правильных ответов:<span></span></small> </p>

<p id="falseAnswer"><small>Неправильных ответов:<span></span></small></p>

</div>

mystyle.css содержит простые стили для центрирования и увеличения шрифта, может быть потом добавлю другой шрифт и цвета

body, html {
height: 100%;
font-family: Arial, sans-serif;
}
.box {
font-size: 250%;
color: #333;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
input {
text-align: center;
font-size: 100%;
width: 2em;
color: #0000ff;
}

в папке js находятся скрипты, jquery.js - обычный jquery файл, table.js содержит мой скрипт

var arr = [ '9 + 2 = 11', 
'9 + 3 = 12', 
'9 + 4 = 13',
'9 + 5 = 14',
'9 + 6 = 15',
'9 + 7 = 16',
'9 + 8 = 17',
'9 + 9 = 18',
'8 + 3 = 11',
'8 + 4 = 12',
'8 + 5 = 13',
'8 + 6 = 14',
'8 + 7 = 15',
'8 + 8 = 16',
'7 + 4 = 11',
'7 + 5 = 12',
'7 + 6 = 13',
'7 + 7 = 14',
'6 + 5 = 11',
'6 + 6 = 12']

function getInst(arr) {
rand = Math.floor(Math.random() * arr.length);
return arr[rand];
}
var trueAnswer = 0;
var falseAnswer = 0;
var line = getInst(arr);
$("#line").text(line.slice(0, 7)).append($('<input type="text" id="answer">'));
$('#answer').focus();
$('body').on('change', '#answer', function() {
if($('#answer').val() == line.slice(-2)) {
$('#status').text('Молодец!');
$('#line').text('');
line = getInst(arr);
trueAnswer++;
$('#trueAnswer span').text(trueAnswer);
$("#line").text(line.slice(0, 7)).append($('<input type="text" id="answer">'));
$('#answer').focus();
}
else {
$('#answer').text('');
falseAnswer++;
$('#falseAnswer span').text(falseAnswer);
$('#status').text('Попробуй еще раз!');
}
});

Немного пробегусь по коду. arr - массив, содержит заданную таблицу сложения. Функция getInst принимает массив и возвращает случайную строчку, которую я сохраняю в line, дальше при помощи on jquery вешаю событие change на генерируемый input#answer. Нельзя сразу при помощи change прослушивать #answer, потому что это динамически генерируемый input и он не существует на момент загрузки страницы. Дальше все просто.