JSFiddle - React, Tailwind, and code Playground

HTML

<form id = 'player_stuff'>
    Player's Position:<br>
    <input type="radio" name="position" value="p1" checked>Position One
    <input type="radio" name="position" value="p2" checked>Position Two
    <input type="radio" name="position" value="p3" checked>Position Three
    <input type="radio" name="position" value="p4" checked>Positin Four
    <br/>
    Add by Player ID:<br>
    <input type='text' name='player_id'>
    <input type="button" value="Submit Player" id='smit' >
</form>
<div id="disp_player"></div>

JavaScript

document.getElementById('smit').onclick = function () {
    var checkedPosition = 
        document.querySelectorAll("#player_stuff [name='position']:checked");
    var playerId = 
        document.querySelector("#player_stuff [name='player_id']");
    var position = checkedPosition[0].value;
    var player_id = playerId.value;

    document.getElementById('disp_player').innerHTML = position + " " + player_id;
}