JSFiddle - React, Tailwind, and code Playground

HTML

<form>
<fieldset><legend>Options</legend>
      <ul>
        <li><input type="radio" name="A" id="option1" onclick="focusThis();"><label for="option1">Option 1</label> 
        	<label for="field1">Field 1</label><input id="field1"/></li>
        
        <li><input type="radio" name="A" id="option2" onclick="focusThis();"><label for="option2">Option 2</label>
        
            <fieldset id=""><legend></legend>
              <ul>
                <li><label for="field2">Field 2</label> <input id="field2"/></li>
                  <li><label for="field3">Field 3</label> <input id="field3"/></li>
              </ul>
          </fieldset>
         </li>
      </ul>
  </fieldset>
</form>

CSS

ul li { list-style: none }
	input[type=checkbox], input[type=radio]  {
		display:none; /*  <-- with this it doesn't work in IE7 & IE8*/
	}

JavaScript

function focusThis() {
		var option1 = $('#option1').is(':checked');
		if (option1) {
			//alert(1);
			$('#field1').focus();
		} else {
			//alert(2);
			$('#field2').focus();
		}
	}