JSFiddle - React, Tailwind, and code Playground

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>
<button id="back" onclick="ChangeSelection(false);">Back</button>
<button id="next" onclick="ChangeSelection(true);">Next</button>

JavaScript

var players = [0,3,1,2];
var currentPosInArray = 0;
    ChangeSelectedRadio();

function ChangeSelectedRadio() {
    var radio = document.querySelectorAll("input[type='radio']");
    var arrItem = players[currentPosInArray];
    for (var i =0; i< radio.length; i++ ){
        radio[i].checked = false;
    }
    if (radio[arrItem]) {
        radio[arrItem].checked = true;
    }
}

ChangeSelection = function(forward) {
    if (forward) {
        currentPosInArray++;
    }
    else {
        currentPosInArray--;
    }
    if (currentPosInArray < 0) {
        currentPosInArray = players.length -1; //if is in first pos and click "Back" - go to last item
    }
    else if (currentPosInArray >= players.length) {
        currentPosInArray = 0; //if is in last position and click "Next" - go to first item
    }
    ChangeSelectedRadio();
}