Javascript-форум - Клонировать в HTML через Javascript примеры на умножение

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Клонировать в HTML через Javascript примеры на умножение (https://javascript.ru/forum/misc/84135-klonirovat-v-html-cherez-javascript-primery-na-umnozhenie.html)

Клонировать в HTML через Javascript примеры на умножение

Пока никак не могу освоить правильность работы клонирования в Javascript.

Сделал в HTML-файле код, который генерирует пример на умножение двух цифр от 1 до 10 и по нажатию кнопки "Проверить" выдает результат правильный ли ответ.

Код:

<head>



<title>Математические задания</title>



<meta charset="utf-8">



<style type="text/css">









    </style>



</head>





<body>



    <div class="primer">



        <span id="num1"></span> х

        <span id="num2"></span> =

        <input type="number" id="plus" width="5">

        <input type="button" onclick="count()" value="Проверить" width="5">

        <p id="result"></p>



    </div>



</body>



<script>





const random = n => Math.round(Math.random() * n);



var num1 = random(10);





var num2 = random(10);





document.getElementById('num1').innerHTML = num1;



document.getElementById('num2').innerHTML = num2;





sum = num1 * num2;







var right = 'Правильно';



var not = 'Неправильно';





function count() {

var plus = Number(document.getElementById('plus').value);



if (sum == plus) {



document.getElementById('result').innerHTML = right;



} else {



document.getElementById('result').innerHTML = not;



}



}





</script>

Теперь надо, чтобы выдавало допустим сразу 20 разных таких примеров и возле каждого индивидуальная кнопка проверки правильности.

При чем, сделать нужно не путем прописывания 20 раз части кода <div></div>, а через Javascript совершить правильно клонирование.

Проблема в том, что при клонировании будет повторяться одинаковый 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>

Работает. Спасибо.
Заодно и подачу некоторых операторов в новом виде для себя вижу.
Жаль +1 к карме не позволяет добавить