Проблема в том, что при клонировании будет повторяться одинаковый id,
а обработчики не клонируются.
Поэтому лучше действовать через class, а не id.
И сначала создать все объекты, а потом пройтись в цикле и все им задать
Как то так
<head>
<title>Математические задания</title>
<meta charset="utf-8">
<style type="text/css">
</style>
</head>
<body>
<div class="primer">
<span class="num1"></span> х
<span class="num2"></span> =
<input type="number" class="plus" width="5">
<input type="button" class="test" value="Проверить" width="5">
<p class="result"></p>
</div>
</body>
<script>
const right = 'Правильно';
const not = 'Неправильно';
function count() {
const parent = this.closest('.primer');
const plus = Number(parent.querySelector('.plus').value);
const res = Number(parent.querySelector('.plus').dataset.res);
parent.querySelector('.result').innerHTML = (res == plus)? right : not;
}
const orig = document.querySelector('.primer');
let num = 19;
while (num--) {
const clone = orig.cloneNode(true);
document.body.append(clone);
}
const random = n => Math.round(Math.random() * n);
document.querySelectorAll('.primer').forEach(pr => {
const num1 = random(10);
const num2 = random(10);
pr.querySelector('.num1').innerHTML = num1;
pr.querySelector('.num2').innerHTML = num2;
pr.querySelector('.plus').dataset.res = num1 * num2;
pr.querySelector('.test').onclick = count;
})
</script>
</body>
