Simple jQuery Loop Faceting

<Set query=insurance_companies type=insurance_company />

<!-- L&L template for dropdown -->

<!-- Dynamic Dropdown Label -->
<div><label for="insurance" class="coverage-label">Insurance company</label></div>
<!-- Dynamic Dropdown for Insurance Company Name -->
<select name="insurance" id="insurance" aria-label="Select an insurance company to see which states they cover">
  <option value="" selected disabled>Select from this list</option>
  <Loop query=insurance_companies>
    <option value="{Field name}"><Field title /></option>
  </Loop>
</select>


<!-- L&L Template for content -->

<!-- Dynamic Content Label -->
<div>
  <label class="coverage-label" for="state-list">States covered</label>
</div>
<!-- None selected text -->
<div id="state-instructions">
  Select a company to see state coverage.
</div>
<!-- List of states (state taxonomy) for each insurance company -->
<div id="state-list">
  <Loop query=insurance_companies>
    <ul id="{Field name}-states" class="insurance-state">
      <Loop taxonomy=state post=current>
        <li>
          <Field title />
        </li>
      </Loop>
    </ul>
  </Loop>
</div>

1. The content is pulled from a CPT called insurance_company. That CPT has a taxonomy called state. Using Loops & Logic, we will output a <select> containing the insurance companies.
2. Next to that, we will output a list of divs, one for each insurance company with their corresponding covered States.
3. Then with the JS, we will hide all those divs, leaving an instructional div showing when nothing is selected. When an insurance company is selected, we will find the matching div and display it.

jQuery(document).ready(function($) {
  
  // Hide all states
  $('.insurance-state').hide().attr('aria-hidden', 'true');

  // Get selected option
  $("#insurance").change(function() {
    var selectedInsurance = $('#insurance option:selected');
    var selectedInsuranceSlug = selectedInsurance.attr('value');

    // Hide all other states
    $('.insurance-state').fadeOut(200).attr('aria-hidden', 'true');
    $('#state-instructions').fadeOut(200);

    // Find div with matching id
    var matchingId = '#' + selectedInsuranceSlug + '-states';
    var foundState = $(matchingId);

    // Unhide states that match selected option value
    foundState.delay(200).fadeIn(200).attr('aria-hidden', 'false');
  });
  
});