JSFiddle - React, Tailwind, and code Playground

by mauricederegt

HTML

<ul id="listContainer">
<div id="q0" >
      <li style="display:list-item" style="border:orange; border-width:5px; border-style:solid;">
          <h3>1. The color of the sky is... </h3>
          <input type="radio" name="question0" value="A"/>Green<br/>
          <input type="radio" name="question0" value="B"/>Blue<br/>
          <input type="radio" name="question0" value="C"/>Red<br/>
              <input type="radio" name="question0" value="D"/>Purple<br/>
      </li>
    </div>

    <div id="q1"  >
      <li style="display:none">
        <h3>2. Paper comes from... </h3>
          <input type="radio" name="question1" value="A"/>Water<br/>
          <input type="radio" name="question1" value="B"/>Cement<br/>
          <input type="radio" name="question1" value="C"/>Trees<br/>
              <input type="radio" name="question1" value="D"/>The Sky<br/>
      </li>
    </div>
    <div id="q2" >
      <li  style="display:none">
        <h3>3. How many hours in a day? </h3>
          <input type="radio" name="question2" value="A"/>24<br/>
          <input type="radio" name="question2" value="B"/>22<br/>
          <input type="radio" name="question2" value="C"/>16<br/>
          <input type="radio" name="question2" value="D"/>48<br/>
      </li>
    </div>
</ul>
   <button id="prev" >prev</button> <button id="next" >next</button>

JavaScript

document.getElementById('next').addEventListener("click",function(){
    
    var listContainer = document.getElementById("listContainer");
    var listItem = listContainer.getElementsByTagName("li");

    for (var i=0; i < listItem.length-1; i++) 
    {
        if(listItem[i].style.display == "list-item")
        {
            listItem[i].style.display = "none";
            listItem[i+1].style.display = "list-item";
            if(i == listItem.length-2 )
                this.disabled = "true";
            break;
        }
    }
    
});

document.getElementById('prev').addEventListener("click",function(){
    
    var listContainer = document.getElementById("listContainer");
    var listItem = listContainer.getElementsByTagName("li");

    for (var i=0; i < listItem.length-1; i++) 
    {
        if(listItem[i].style.display == "list-item")
        {
            listItem[i].style.display = "none";
            listItem[i-1].style.display = "list-item";
            if(i == listItem.length-2 )
                this.disabled = "true";
            break;
        }
    }
    
});