JSFiddle - React, Tailwind, and code Playground
HTML
<label>Are you a U.S. citizen or otherwise authorized to work in the U.S. on an unrestricted basis?:</label>
<br />
<input type="radio" id="yes_to_work" value="yes_to_work" name="can_work" onclick="javascript:yesnoCheckcanwork();" required="required">
<label for="yes_to_work" class="light">Yes</label>
<input type="radio" id="no_to_work" value="no_to_work" name="can_work" onclick="javascript:yesnoCheckcanwork();" required="required">
<label for="no_to_work" class="light">No</label>
<div id="notoworkexplain" style="display:none">
<label for="no_to_work_explain">Please explain:</label>
<textarea id="no_to_work_explain" name="no_to_work_explain"></textarea>
</div>
<br />
<label>Have you ever been convicted of a felony?:</label>
<br />
<input type="radio" id="yes_to_felony" value="yes_to_felony" name="felony" onclick="javascript:yesnoCheckcanfelony();" required="required">
<label for="yes_to_felony" class="light">Yes</label>
<input type="radio" id="no_to_felony" value="no_to_felony" name="felony" onclick="javascript:yesnoCheckcanfelony();" required="required">
<label for="no_to_felony" class="light ">No</label>
<div id="yestofelonyexplain" style="display:none ">
<label for="yes_to_felony_explain ">Please provide date of conviction and fully describe the circumstances:</label>
<textarea id="yes_to_felony_explain" name="yes_to_felony_explain "></textarea>
</div>
JavaScript
function yesnoCheckcanwork() {
if (document.getElementById('no_to_work').checked) {
document.getElementById('notoworkexplain').style.display = 'block';
document.getElementById('no_to_work_explain').required = true;
} else {
document.getElementById('notoworkexplain').style.display = 'none';
document.getElementById('no_to_work_explain').required = false;
}
}
function yesnoCheckcanfelony() {
if (document.getElementById('yes_to_felony').checked) {
document.getElementById('yestofelonyexplain').style.display = 'block';
document.getElementById('yes_to_felony_explain').required = true;
} else {
document.getElementById('yestofelonyexplain').style.display = 'none';
document.getElementById('yes_to_felony_explain').required = false;
}
}