JSFiddle - React, Tailwind, and code Playground

HTML

<form id="newPlayer">
  Username:
  <br>
  <input type="text" name="user" />
  <br> Please Choose a Class:
  <br>
  <input type="radio" name="class" />Archer
  <input type="radio" name="class" />Mage
  <input type="radio" name="class" />Warrior
  <br> Please Choose a Race:
  <br>
  <input type="radio" name="race" />Orc
  <input type="radio" name="race" />Elf
  <input type="radio" name="race" />Human
  <input type="radio" name="race" />Worg
  <br>
  <input type="submit" value="Submit">
  <p id="descript"></p>
</form>

CSS

#newPlayer {
  position: relative;
  top: 50px;
  color: #c10606;
  background-color: rgba(0, 0, 0, .3);
  width: 350px;
  margin: auto;
  height: 200px;
  border-radius: 5px;
}

JavaScript

function classStats() {
  classes = ['archer', 'mage', 'warrior'];
  classStats = ['HP: 20 Strength: 3 Intellect: 1 Speed: 5 Magic Defense: 1 Defense: 3', 'HP: 15 Strength: 1 Intellect: 6 Speed: 2 Magic Defense: 2 Defense: 1', 'HP: 30 Strength: 2 Intellect: 1 Speed: 1 Magic Defense: 3 Defense: 5'];
  classAdd = ['The archer also has a special passive for armor penetration.', 'The mage has a special passive for increased gold gain', 'The warrior has a special passive for percent damage mitigation.'];
  for (i = 0; i < 3; i++) {
    c = classes[i];
    e = classStats[i];
    f = classAdd[i];
    if ($('input[name=class]:checked').val() === c) {
      $('#descript').text(e + ' ' + f);
    }
  }
}
classStats();