JSFiddle - React, Tailwind, and code Playground

HTML

<form id="vote" action="#" method="POST">
    <div id="content">
        <div class="pattern">
            <h4 class="question">{% question %}</h4>
            <div class="answers">
                <div class="radio"><label><input type="radio" name="poll" value="{% answer.value %}">{% answer.title %}</label></div>
            </div>
        </div>
    </div>
    <div><button type="submit" class="btn btn-default">Ответить</button></div>
</form>

JavaScript

const data = [{
    "id": "1",
    "question": "Какую марку предпочитаете?",
    "answers": ["honda", "bmw", "volvo"]
}, {
    "id": "2",
    "question": "Цвет авто?",
    "answers": ["black", "red", "blue"]
}];

const content = document.getElementById('content');
const patternNode = content.querySelector('.pattern');

patternNode.classList.remove('pattern');
const pattern = patternNode.outerHTML;
patternNode.parentNode.removeChild(patternNode);

data.forEach(function(question, index) {
    content.insertAdjacentHTML('beforeEnd', pattern.replace(/{%\s?question\s?%}/gim, question.question));
    const questionNode = content.lastChild;
    questionNode.dataset.index = index;
    questionNode.style.display = 'none';
    const answers = questionNode.querySelector('.answers');
    const answer = answers.querySelector('.radio').outerHTML;
    answers.innerHTML = question.answers.map(function(title, value) {
        return answer
            .replace(/{%\s?answer.title\s?%}/gim, title)
            .replace(/{%\s?answer.value\s?%}/gim, value);
    }).join("\n");
});

let currentQuestionIndex = 0;
const questions = [].slice.call(content.querySelectorAll('[data-index]'));
questions[0].style.display = 'block';

document.querySelector('#vote [type="submit"]').addEventListener('click', function(e) {
    questions[currentQuestionIndex].style.display = 'none';
    if (++currentQuestionIndex >= questions.length)
        return;

    e.preventDefault();
    questions[currentQuestionIndex].style.display = 'block';
});