JSFiddle - React, Tailwind, and code Playground

by Yogesh Gupta

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<form name="onlinepensionform" action="submit" method="post">
                1.  Do you require a Centrelink or Veterans' Affairs Schedule?
               <input type="radio" required name="RequiresCentrelinkOrVeteransAffairSchedule"  value="Yes">
               <label for="RequiresCentrelinkOrVeteransAffairSchedule">Yes</label>
               <input type="radio" required name="RequiresCentrelinkOrVeteransAffairSchedule"  value="No">
               <label for="RequiresCentrelinkOrVeteransAffairSchedule">No</label>
                
        <div class="additionalInfo">
          <p>2. Please confirm your identity using one of the below Government issued identification.</p>
          <label for="IdentityValue">Australian driver's licence number:</label>
          <input name="IdentityValue" type="text"  id="IdentityValue" value="" required />
          <br />
          <label for="IdentityType">State of Issue:</label>
          <input name="IdentityType" type="text"  id="IdentityType" value="" required />

        </div>
    <div>
      <input type="submit" value="Submit Form">
    </div>                   
</form>

JavaScript

$('input[name="RequiresCentrelinkOrVeteransAffairSchedule"]').change(function(){
   var val = $(this).val();
   if(val=='Yes') {
      $('.additionalInfo').find('input').attr('required','required');
      $('.additionalInfo').show();
   } else if(val=='No'){
      $('.additionalInfo').find('input').removeAttr('required');
      $('.additionalInfo').hide();
   }
});