JSFiddle - React, Tailwind, and code Playground

by bartula

HTML

<Select id="colorselector">
   <option value="">Select one</option>
   <option value="1">Red</option>
   <option value="2">Yellow</option>
   <option value="3">Blue</option>
   <option value="4">Orange</option>
   <option value="5">Mix</option>
</Select>
<div id="" class="f1 colors"> <input type="text" class="input1" placeholder="red..."> </div>
<div id="" class="f2 colors"> <input type="text" class="input2" placeholder="yellow.."> </div>
<div id="" class="f3 colors"> <input type="text" class="input3" placeholder="blue.."> </div>
<div id="" class="f4 colors"> <input type="text" class="input4" placeholder="orange.."> </div>
<div id="" class="f3 f4 f5 colors"> <input type="text" class="input3 input4 input5" placeholder="blue/orange.."> </div>

JavaScript

$(function() {
    		$('.colors').hide();
        $('#colorselector').change(function(){
        		$('.colors').hide();
            $('.colors input').attr("required", false);
            $('.f' + $(this).val()).show();
            $('.input' + $(this).val()).attr("required", true);
        });
    });