JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

<select id="change_service_booked">
  <option class="level-0" data-prefix="SP">Party</option>
  <option class="level-0" data-prefix="KO" selected="selected">Schools</option>
  <option class="level-0" data-prefix="EV">Business</option>
</select>

<div class="booked-appointment-details">
  <p class="appointment-title">Prime Studio</p>
</div>

<select data-calendar-id="0" class="field-paid-service-select" name="paid-service-label---7876891">
  <option value="">Select a Product</option>
  <option value="17">$1777 - Ulikoli nutistudio - #EV</option>
  <option value="18">$999 - Ulikoli Avastudio - #EV</option>
  <option value="19">$2494 - Superangeli Studio - #EV</option>
  <option value="12">$880 - Superangeli Studio - #SP</option>
  <option value="13">$450 - Prime Studio - #KO</option>
  <option value="14">$750 - Ulikoli nutistudio - #SP</option>
  <option value="15">$20 - Leiutajate studio - #SP</option>
  <option value="16">$660 - Leiutajate studio - #EV</option>
</select>

JavaScript

$(function() {

  let prefix = $('#change_service_booked').find(':selected').data('prefix'); //KO

  show_hide_select_options(prefix);

  $('#change_service_booked').on('input', function(e) {

    prefix = $(this).find(':selected').data('prefix');

    show_hide_select_options(prefix);

  });

});

function show_hide_select_options(prefix) {

  let first_found = true;

  $('.field-paid-service-select option').each(function(i) {

    if (!new RegExp(`#${prefix}$`).test($(this).text())) {

      $(this).hide();

    } else {
    
      if(first_found) {
      
        $(this).prop('selected', true);
        first_found = false;
      
      }

      $(this).show();

    }

  });

}