JSFiddle - React, Tailwind, and code Playground

JavaScript

data = {
   "1": {
     "question": "Which one of the five is least like the other four?",
     "values": ["Snake", "Rat", "Lion", "Pig", "Cow", "Goat"],
     "answer": "Snake"
   },
   "2": {
     "question": "Which number should come next in the series?<br/>1 - 1 - 2 - 3 - 5 - 8 - 13",
     "values": ["8", "13", "21", "26", "31"],
     "answer": "21"
   },
   "3": {
     "question": "Which one of the five choices makes the best comparison?<br/>PEACH is to HCAEP as 46251 is to",
     "values": ["25641", "26451", "12654", "51462", "15264"],
     "answer": "15264"
   }
 }

 $.each(data, function(i, v) {
   var answ = '';
   $.each(v.values, function(x, t) {
     answ += '<li>' + t + '</li>';
   });
   $('body').append('<div class = "two" style = "display:none;"><h2>Question' + i + '</h2><h3 style="display:none;">' + v.question + '</h3><ul class = "anwsers"> ' + answ + '</ul><ul class = "controls"> <li class = "back" ><button> Back </button> </li> <li class="next"><button> Next </button> </li></ul></div>');
 });
 $('.two:first').show();
 $('body').on('click', '.two li.next button', function(index) {
   $(this).closest('.two').hide();
   if ($(this).closest('.two').is('.two:last')) {
     $('.two:first').show();
   } else {
     $(this).closest('.two').next().show();
   }
 });
 $('body').on('click', '.two li.back button', function(index) {
   $(this).closest('.two').hide();
   if ($(this).closest('.two').is('.two:first')) {

     $('.two:last').show();
   } else {
     $(this).closest('.two').prev().show();
   }
 });