JSFiddle - React, Tailwind, and code Playground

HTML

<form>
  <p>
    <label for='sel-0' id='label-0'>Sex</label>
    <br>
    <input type='radio' id='sel-0-1' name='sel-0' value='1'> Male
    <br>
    <input type='radio' id='sel-0-2' name='sel-0' value='2'> Ambiguous
    <br>
    <input type='radio' id='sel-0-3' name='sel-0' value='3'> Female
    <br>
    <input type='radio' id='sel-0-0' name='sel-0' value='0' checked='checked'> Random
    <br>
  </p>
    <p>
    <label for='sel-1' id='label-1'>Height</label>
    <br>
    <input type='radio' id='sel-1-1' name='sel-1' value='1'> Short
    <br>
    <input type='radio' id='sel-1-2' name='sel-1' value='2'> Average
    <br>
    <input type='radio' id='sel-1-3' name='sel-1' value='3'> Tall
    <br>
    <input type='radio' id='sel-1-0' name='sel-1' value='0' checked='checked'> Random
    <br>
  </p>
  <p>
    <label for='sel-2' id='label-2'>Weight</label>
    <br>
    <input type='radio' id='sel-2-1' name='sel-2' value='1'> Light
    <br>
    <input type='radio' id='sel-2-2' name='sel-2' value='2'> Average
    <br>
    <input type='radio' id='sel-2-3' name='sel-2' value='3'> Heavy
    <br>
    <input type='radio' id='sel-2-0' name='sel-2' value='0' checked='checked'> Random
    <br>
  </p>
<p>
    <label for='sel-3' id='label-3'>Beauty</label>
    <br>
    <input type='radio' id='sel-3-1' name='sel-3' value='1'> Ugly
    <br>
    <input type='radio' id='sel-3-2' name='sel-3' value='2'> Average
    <br>
    <input type='radio' id='sel-3-3' name='sel-3' value='3'> Beautiful
    <br>
    <input type='radio' id='sel-3-0' name='sel-3' value='0' checked='checked'> Random
    <br>
  </p>
<p>
    <label for='sel-4' id='label-4'>Darkness</label>
    <br>
    <input type='radio' id='sel-4-1' name='sel-4' value='1'> Light
    <br>
    <input type='radio' id='sel-4-2' name='sel-4' value='2'> Average
    <br>
    <input type='radio' id='sel-4-3' name='sel-4' value='3'> Dark
    <br>
    <input type='radio' id='sel-4-0' name='sel-4' value='0' checked='checked'> Random
    <br>
 ...

JavaScript

function randomize() {
if (document.getElementById("sel-0-0").checked==true) var val_0 = Math.floor(Math.random() * 3) +1;
else if (document.getElementById("sel-0-1").checked==true) var val_0 = 1;
else if (document.getElementById("sel-0-2").checked==true) var val_0 = 2;
else if (document.getElementById("sel-0-3").checked==true) var val_0 = 3;
document.getElementById("label-0").innerHTML = "Sex (" + val_0 + " out of 3)";

if (document.getElementById("sel-1-0").checked==true) var val_1 = Math.floor(Math.random() * 7) +1;
else if (document.getElementById("sel-1-1").checked==true) var val_1 = Math.floor(Math.random() * 3) +1;
else if (document.getElementById("sel-1-2").checked==true) var val_1 = Math.floor(Math.random() * 3) +3;
else if (document.getElementById("sel-1-3").checked==true) var val_1 = Math.floor(Math.random() * 3) +5;
document.getElementById("label-1").innerHTML = "Height (" + val_1 + " out of 7)";

if (document.getElementById("sel-2-0").checked==true) var val_2 = Math.floor(Math.random() * 7) +1;
else if (document.getElementById("sel-2-1").checked==true) var val_2 = Math.floor(Math.random() * 3) +1;
else if (document.getElementById("sel-2-2").checked==true) var val_2 = Math.floor(Math.random() * 3) +3;
else if (document.getElementById("sel-2-3").checked==true) var val_2 = Math.floor(Math.random() * 3) +5;
document.getElementById("label-2").innerHTML = "Weight (" + val_2 + " out of 7)";

if (document.getElementById("sel-3-0").checked==true) var val_3 = Math.floor(Math.random() * 10) +1;
else if (document.getElementById("sel-3-1").checked==true) var val_3 = Math.floor(Math.random() * 3) +1;
else if (document.getElementById("sel-3-2").checked==true) var val_3 = Math.floor(Math.random() * 3) +3;
else if (document.getElementById("sel-3-3").checked==true) var val_3 = Math.floor(Math.random() * 3) +8;
document.getElementById("label-3").innerHTML = "Beauty (" + val_3 + " out of 10)";

if (document.getElementById("sel-4-0").checked==true) var val_4 =...