JSFiddle - React, Tailwind, and code Playground

by Nibin George

HTML

<div class="form-group">
    <div class="row">
        <div class="col-md-3">
            <label>Contact Type:</label>
            <select id="ownership" data-placeholder="Select Ownership" class="required select-full" tabindex="2" name="st">
                <option value="" selected></option>
                <option value="1">VIP</option>
                <option value="2">Collector</option>
                <option value="3">Client</option>
            </select>
        </div>
        <div id="vip">
            <div class="col-md-3">
                <label>Sold To (VIP): <span class="mandatory">*</span>
                </label>
                <select data-placeholder="USD" class="required select-full" id="soldto1" name="soldto1">
                    <option value=""></option>
                </select>
            </div>
        </div>
        <div id="coll">
            <div class="col-md-3">
                <label>Sold To (Collector): <span class="mandatory">*</span>
                </label>
                <select data-placeholder="USD" class="required select-full" id="soldto2" name="soldto2">
                    <option value=""></option>
                </select>
            </div>
        </div>
        <div id="clil">
            <div class="col-md-3">
                <label>Sold To (Client): <span class="mandatory">*</span>
                </label>
                <select data-placeholder="USD" class="required select-full" id="soldto3" name="soldto3">
                    <option value=""></option>
                </select>
            </div>
        </div>
    </div>

JavaScript

$(document).ready(function () {
        $('#vip').hide();
        $('#coll').hide();
        $('#clil').hide();
        $('#ownership').change(function () {
            if ($('#ownership option:selected').text() == 'VIP') {
                $('#vip').show();
                $('#coll').hide();
                $('#clil').hide();

            }
            if ($('#ownership option:selected').text() == 'Collector') {
                $('#vip').hide();
                $('#coll').show();
                $('#clil').hide();
            }
            if ($('#ownership option:selected').text() == 'Client') {
                $('#vip').hide();
                $('#coll').hide();
                $('#clil').show();
            }
        });
    });