JSFiddle - React, Tailwind, and code Playground

by wirey00

HTML

<body>

<form>
    <select id="sel">
        <option value="">- select -</option>
        <option value="option1">Option 1</option>
        <option value="option2">Option 2</option>
        <option value="option3">Option 3</option>
        <option value="option4">Option 4</option>
        <option value="option5">Other</option>
    </select>

    <label id="label1">
        <select id="sel2">
            <option value="">- select -</option>
            <option value="option6">Option 6</option>
            <option value="option7">Option 7</option>
        </select>
    </label>

    <label id="label2" for="option2">Text box label 2
        <input type="text" id="option2" />
    </label>
    <label id="label3" for="option3">Text box label 3
        <input type="text" id="option3" />
    </label>
    <label id="label4" for="option4">Text box label 4
        <input type="text" id="option4" />
    </label>
    <label id="label5" for="option5">Other
        <input type="text" id="option5" />
    </label>

    <label id="label6" for="option6">Text box label 6
        <input type="text" id="option6" />
    </label>
    <label id="label7" for="option8">Text box label 7
        <input type="text" id="option7" />
    </label>


</form>

</body>

JavaScript

$(function() {
    $('label').hide();
    $('#sel,#sel2').change(function() {
        var $selIndex = $('#sel > option:selected').index();
        var val = $(this).val().replace('option', '');
        var $label = $('#label' + val);      
        $('label').not($label.add()).hide();
        $('#label1').toggle($selIndex == 1);
        $label.show();
    });

    $("input").focus(function() {
        $(this).next("span").fadeIn(1000);
    }).blur(function() {
        $(this).next("span").fadeOut(1000);
    });
});