JSFiddle - React, Tailwind, and code Playground

CSS

.answer {
    padding: 10px;
}

JavaScript

var i = 0,
    qa = [{
        question: '1 + 1?',
        answer: 2
    }, {
        question: '10 - 5?',
        answer: 5
    }, {
        question: '100 * 100?',
        answer: 10000
    }];

function putQuestion() {
    if (typeof qa[i] === 'undefined') {
        document.body.insertAdjacentHTML('beforeEnd', '<p>Прокуратура к вам вопросов больше не имеет!</p>');
        return false;
    }
    var div = document.createElement('div'),
        p = document.createElement('p'),
        inp = document.createElement('input'),
        but = document.createElement('button');

    p.textContent = qa[i].question;

    but.textContent = 'Ответить';
    but.addEventListener('click', checkAnswer, false);

    div.classList.add('answer');
    div.appendChild(p);
    div.appendChild(inp);
    div.appendChild(but);

    document.body.appendChild(div);
}

function checkAnswer() {
    var inp = this.previousElementSibling;
    if (+inp.value.trim() !== qa[i].answer) {
        inp.style.border = '1px solid #f00';
        inp.value = '';
    } else {
        inp.style.border = '1px solid #060';
        this.style.display = 'none';
        i++;
        putQuestion();
    }
}
putQuestion();