JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>

<head lang="en">


  <title>Super Awesome Quiz!</title>
</head>

<body>
  <header class="header">
    <h1 classs="title">Welcome to My Super Awesome Quiz!!</h1>
    <h3 class="question_counter">Ver. 1.1</h3>
  </header>



  <h2 class="q_title"> </h2>
  <!-- Will use questionCounter here once created -->
  <h3 class="q_question"></h3>
  <form id='form'>
    <input class='btn btn1' type="radio" name="1" value=""> <span class="label1"></span>
    <br>
    <input class='btn btn2' type="radio" name="1" value=""> <span class="label2"></span>
    <br>
    <input class='btn btn3' type="radio" name='1' value=''> <span class="label3"></span>
    <br>
    <input class='btn btn4' type="radio" name='1' value=''> <span class="label4"></span>
    <br>
    <input id="submit" type='submit' name='1' value='Think you got it?  Click here to find out!'>
    <br>
  </form>
  <div class='jumbotron'>
    <h2></h2>
  </div>
  <div class="continue">
    <button>Continue you on...if you dare!</button>
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</body>

CSS

/*Title Style*/

body {
  background-color: #347f5f;
}

.header {
  text-align: center;
  background-color: #296048;
  border-radius: 3%;
  box-shadow: 3px 3px 10px;
}

.q_title {
  background-color: #37956d;
  box-shadow: 3px 3px 10px;
  width: 50%;
  border-radius: 5%;
  text-align: center;
}

button {
  width: 100px;
  height: 50px;
}

.jumbotron {
  width: 200px;
  height: 100px;
  background-color: white;
}

JavaScript

$(document).ready(function() {

  // Create array to traverse so that on clicking submit, the current question
  //is deleted, and the next question in the array is loaded.  
  var questionsArray = [];

  //Create counters for both correct answers and current question
  var correctAnswers = 0;
  var currentQuestion = 0;

  //Contructor Function to create questions
  function Question(question, choices, answer) {
    this.question = question;
    this.choices = choices;
    this.answer = answer;
  }

  //Question Creations
  questionsArray.push(new Question('Who is the Flash', ['Walter White', 'Johnny Cage', 'Barry Allen', 'Peter Parker'], 'Barry Allen'));
  questionsArray.push(new Question('Who shot first?', ['Greedo did!', 'You know Han did!', 'Lee Harvey!'], 'You know Han did!'));
  questionsArray.push(new Question('The Millenium Falcon made the Kessel Run in how many parsecs?', ['37', '2', '12', 'It never made the Kessel Run you fool!'], '12'));
  questionsArray.push(new Question('Who is Scott Summers?', ['Cyclops', 'The Green Arrow', 'Deadpool', 'Ghost Rider'], 'Cyclops'));
  questionsArray.push(new Question('Donatello preffered which weapon?', ['Katanas', 'Bo Staff', 'Sais', 'Nunchuks']));
  questionsArray.push(new Question());
  questionsArray.push(new Question());
  questionsArray.push(new Question());
  questionsArray.push(new Question());
  questionsArray.push(new Question());

	function populateQuestion(index) {
    $('.q_question').html(questionsArray[index]['question']);
    
    for (var i = 0; i < 4; i++) {
    	$('.jumbotron').html('');
    	$('.btn' + (i + 1)).val(questionsArray[index]['choices'][i]).prop('checked', false);
      $('.label' + (i + 1)).html(questionsArray[index]['choices'][i]);
    }
  }

	populateQuestion(currentQuestion);

  //This register the answer to each question
  $('#submit').on('click', function() {
    var answer = $('input[name="1"]:checked').val(); //By creating the answer variable we are able to store which radio...