JSFiddle - React, Tailwind, and code Playground

HTML

<form>
Learner 
<input type="radio" name="role" value='learner' />

Expert
<input type="radio" name="role" value='expert' />
</form>

<div ID="div2" align=right style="display:none;">
        <label class="labell labelUser" >why?</label>
        <textarea name="description" align="right" id="description"  cols="40" rows="5" class="inputbox">Why?</textarea>
        <span id="descriptionError" class="notifyForUser" spanError></span> </div>

JavaScript

window.onload = function() {
    var oDiv = document.getElementById("div2");
    var arrRoleButtons = document.getElementsByName("role");
    for (var i = 0; i < arrRoleButtons.length; i++) {
        var oCurrentRole = arrRoleButtons[i];
        oCurrentRole.onclick = function() {
            oDiv.style.display = (this.value =='learner') ? "block" : "none"; 
        }
    }
};

function GetRadioValue(oRadButton) {
    var rad_val = "";
    var arrAllRadio = oRadButton.form.elements[oRadButton.name];
    for (var i = 0; i < arrAllRadio.length; i++)
    {
        var oCurButton = arrAllRadio[i];
        if (oCurButton.checked)
        {
            rad_val = oCurButton.value;
            break;
        }
    }
    return rad_val;
}