JSFiddle - React, Tailwind, and code Playground

by Anirudh Tewathia

HTML

<h3 id="question">Which player would you like?</h3>

<input type="radio" name="choice" value="0" id="answ1">
<label for="choice" id="choice_1">John</label>
<br>
<input type="radio" name="choice" value="1" id="answ2">
<label for="choice" id="choice_2">Wayne</label>
<br>
<input type="radio" name="choice" value="2" id="answ3">
<label for="choice" id="choice_3">Steven</label>
<br>
<input type="radio" name="choice" value="3" id="answ4">
<label for="choice" id="choice_4">Jack</label>
<br>
<input type="radio" name="choice" value="4" id="answ5">
<label for="choice" id="choice_5">Jill</label>
<br>
<button id="back">Back</button>
<button id="next">Next</button>

JavaScript

var players = [0, 3, 4, 2, 1];
var i = 0;
var choices = document.querySelectorAll('input[name="choice"]');
choices[players[i]].checked = true;
document.getElementById('back').onclick = function () {
    if (i > 0) {
        i--;
        choices[players[i]].checked = true;
    }
}
document.getElementById('next').onclick = function () {
    if (i < players.length - 1) {
        i++;
        choices[players[i]].checked = true;
    }
}