JSFiddle - React, Tailwind, and code Playground

HTML

<form>
<label>Are you a business or consumer?</label>
      <span>Business</span><input type="radio" onclick="javascript:yesnoCheck();" value="Business" name="customer[note][Business or Consumer?]" id="yesCheck" required/><br/>
      <span>Consumer</span><input type="radio" onclick="javascript:yesnoCheck();" value="Consumer" name="customer[note][Business or Consumer?]" id="noCheck" /><br/>

      <div id="ifYes">
        <label for="businessname">Business name</label>
        <input id="businessname" type="text" name="customer[note][Business Name]" placeholder="Business Name" />
        <label for="regnum">Business Registration No.</label>
        <input id="regnum" type="text" name="customer[note][Business Reg No.]" placeholder="Business Registration No." />
      </div>
</form>

CSS

#ifYes {
		display: none;
	}

		#ifYes.yarp { display: block; }
    
    input:required { background: pink; }

JavaScript

function yesnoCheck() {

  if($('#yesCheck').is(':checked')) {
    $('#ifYes').addClass('yarp');
    $('#businessname').attr('required');
    $('#regnum').attr('required');
  } else {
    $('#ifYes').removeClass('yarp');
    $('#businessname').removeAttr('required');
    $('#regnum').removeAttr('required');
  }

}