JSFiddle - React, Tailwind, and code Playground

HTML

<form action="test.php" method="post">
 <div id="alqa"></div>
 <input type="button" id="right" value="Далее"><input type="button" id="left" value="Назад"><input type="submit" value="Отправить результаты">
</form>

CSS

form b{
 display:block;   
}
input[type=radio]{
  display:inline-block;   
}

.ansText{
  display:inline;
}
form p.qa{
 display:none;   
}

JavaScript

var questions = ['Первая буква алфавита?', 'Последняя буква алфавита?', '2*2='],
    answers = [['Г', 'А', 'У'], ['Щ', 'Ю', 'Я'], ['6', '4', '2']];
for(var i=0, l=questions.length; i<l; i++) {
 var newP = document.createElement('p'),
     quest = document.createElement('b');
  quest.innerHTML = questions[i];
  newP.className = 'qa';
  newP.appendChild(quest);
  for(var i2=0, l2=answers[i].length; i2<l2; i2++) {
    var newInput = document.createElement('input'),
        ansText = document.createElement('p');
    newInput.type = 'radio';
    newInput.name = 'drinks';
    newInput.value = i2+1;
    ansText.innerHTML = ' '+answers[i][i2]+'<br />';
    ansText.className = 'ansText';
    newP.appendChild(newInput);
    newP.appendChild(ansText);
  }              
  document.getElementById('alqa').appendChild(newP);    
} 

(function() {
  var i = 0, questions = $('form p.qa');
  questions[0].style.display = 'block';
  $('#right').click(function(){
    if(i === questions.length - 1) {
      this.style.display='none';
      document.getElementById('left').style.display='none';
      questions[i].style.display='none'; 
      $('input[type=submit]').show();    
      return false;
    }  
    questions[i].style.display='none'; 
    i++;
    questions[i].style.display='block';
    $('#left').show();
  });
  $('#left').click(function(){
    if(i === 0) {
      return false;
    }
    questions[i].style.display='none'; 
    i--;
    questions[i].style.display='block';
    if(i === 0) {
      this.style.display='none'
    }
   });
})();