JSFiddle - React, Tailwind, and code Playground

by baddog04061980

HTML

<div class="option-selectors">

  <div class="selector-wrapper cf">
    <label for="option-kit">
                  Kit
                </label>
    <select id="option-kit">
                  
      <option value="Car" selected="">Car</option>
      <option value="Truck">Truck</option>
      <option value="Big Truck">Big Truck</option>
                  
                </select>
  </div>

  <div class="selector-wrapper cf">
    <label for="option-parts">
                  Parts
                </label>
    <select id="option-parts">
                  
                  <option value="12" selected="">
                    12
                  </option>
                  
                  <option value="18">
                    18
                  </option>
                  
                  <option value="24">
                    24
                  </option>
                  
                  <option value="30">
                    30
                  </option>
                  
                  <option value="36">
                    36
                  </option>
                  
                </select>
  </div>



</div>


<!-- Basic  -->
<div id="Car12" class="choice-boxs">Car and 12 Parts</div>
<div id="Car18" class="choice-boxs">Car and 18 Parts</div>
<div id="Car24" class="choice-boxs">Car and 24 Parts</div>
<div id="Car30" class="choice-boxs">Car and 30 Parts</div>
<div id="Car36" class="choice-boxs">Car and 3 Parts6</div>


<!-- Deluxe -->

<div id="Truck12" class="choice-boxs">Truck and 12 Parts
</div>
<div id="Truck18" class="choice-boxs">Truck and 18 Parts</div>
<div id="Truck24" class="choice-boxs">Truck and 24 Parts</div>
<div id="Truck30" class="choice-boxs">Truck and 30 Parts</div>
<div id="Truck36" class="choice-boxs">Truck and 36 Parts</div>

<!-- Deluxe -->

<div id="BigTruck12" class="choice-boxs">Big Truck and 12 Parts</div>
<div id="BigTruck18" class="choice-boxs">Big Truck and 18 Parts</div>
<div id="BigTruck24"...

JavaScript

$(document).ready(function() {
    $('.choice-boxs').hide();
    $('#Car12').show();
    $("#option-kit, #option-parts").on("change", function() {
      $('.choice-boxs').hide();
      $('#' + $('#option-kit').val() + $('#option-parts').val()).show();
    });
  });