JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
   
    <li>
        
            <td>
                <input type="radio" name="group1" id="1">1</input>
            </td>
            <td>this is option one</td>
        
    </li>
    <li>
       
            <td>
                <input type="radio" name="group1" id="2">2</input>
            </td>
            <td>this is option two</td>
    </li>
    <li>
            <td>
                <input type="radio" name="group1" id="3">3</input>
            </td>
            <td>this is option three</td>

    </li>
    <li>

            <td>
                <input type="radio" name="group1" id="4">4</input>
            </td>
            <td>this is option four</td>

    </li>
</ul>
<button id='next'>next</button>

CSS

li{
    border:ridge;
    display: table;
}
ul{
display: table;
}

JavaScript

Object.prototype['forEach'] = Array.prototype['forEach'];
var selected;
document.body.getElementsByTagName('input').forEach(function (e,i) {
    if (i>1)
        e.parentNode.style['display'] = "none";
    
    e.style['display'] = 'inline';
    e.onclick = function () {
        if (selected) selected.style['background-color'] = '';
        selected = this.parentNode;
        selected.style['background-color'] = "RGB(255,0,0)";
    };
});
document.getElementById('next').onclick = function(){
    var a = document.body.getElementsByTagName('input');
    for (var i = 0;i<a.length;i++) {
        var e = a[i];
        
          if(e.parentNode.style['display']!== "none"){
             e.parentNode.style['display']= "none";
              a[(i+1)%a.length].parentNode.style['display']= "none";
              a[(i+2)%a.length].parentNode.style['display']= "block";
              a[(i+3)%a.length].parentNode.style['display']= "block";
              i = a.length;
          }
      }
};