JSFiddle - React, Tailwind, and code Playground

by Rich Costello

HTML

<fieldset class="form-columns-1">
      <div class="hs_type__c field hs-form-field">
        <label placeholder="Enter your I am a" for=
        "type__c-bf343208-85c3-43e1-a8ab-dc19bd1a0a02">I am a</label>

        <div class="hs-field-desc" style="display: none;"></div>

        <div class="input">
          <select class="hs-input" id="type__c-bf343208-85c3-43e1-a8ab-dc19bd1a0a02"
          name="type__c">
            <option value="Patient">
              Patient
            </option>

            <option value="Healthcare Professional">
              Healthcare Professional
            </option>

            <option value="Health Plan Professional">
              Health Plan Professional
            </option>

            <option value="Investor">
              Investor
            </option>

            <option value="Job Seeker">
              Job Seeker
            </option>

            <option value="Other">
              Other
            </option>
          </select>
        </div>
      </div>
    </fieldset>

    <fieldset class="form-columns-2">
      <div class="hs_firstname field hs-form-field">
        <label placeholder="Enter your First Name" for=
        "firstname-bf343208-85c3-43e1-a8ab-dc19bd1a0a02">First Name <span class=
        "hs-form-required">*</span></label>

        <div class="hs-field-desc" style="display: none;"></div>

        <div class="input">
          <input class="hs-input" type="text" required="required" id=
          "firstname-bf343208-85c3-43e1-a8ab-dc19bd1a0a02" name="firstname" value=""
          placeholder="">
        </div>
      </div>

      <div class="hs_lastname field hs-form-field">
        <label placeholder="Enter your Last Name" for=
        "lastname-bf343208-85c3-43e1-a8ab-dc19bd1a0a02">Last Name <span class=
        "hs-form-required">*</span></label>

        <div class="hs-field-desc" style="display: none;"></div>

        <div class="input">
          <input class="hs-input" type="text"...

JavaScript

$('div.hs_company').hide();
$('label.hs-form-checkbox-display').hide();

$('select[name="type__c"]').change(function () {
if ($('select[name="type__c"]').val() == 'Healthcare Professional') {
                $('div.hs_company').show();
                $('input[name="area_of_interest__c"], label[for="area_of_interest__c7-bf343208-85c3-43e1-a8ab-dc19bd1a0a02"]');
        
            } else if ($('select[name="type__c"]').val() == 'Health Plan Professional') {
                $('div.hs_company').show();
                
            } else {
                $('div.hs_company').hide(); 
                $('label.hs-form-checkbox-display').hide();
              
            }
        });