JSFiddle - React, Tailwind, and code Playground

by BenjaminRay

HTML

<div class='myTargetClass'>Parent
    <div>Child
        <div>Child
            <div id='feedback_q1_desc'>q1 desc</div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-sm-12">
        <div class="form-group">
            <label for="feedback_q1">Hello?</label>
            <select class="form-control selectpicker show-tick" name="feedback_q1[]" id="feedback_q1" multiple="multiple" title="Choose...">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
            </select>
        </div>
    </div>
</div>

CSS

.hide {
    display: none;
}

JavaScript

$(function () {
        $('select[multiple]').each(function () {
            $(this).on('change', function () {
                var strID = $(this).attr('id');
                var obj = $('#' + strID + '_desc');
                var vals = $(this).val();
                for (i = 0; i < vals.length; i++) {
                    if ($(this).val()[i] == "4") {
                        alert('success');
                        obj.closest('.myTargetClass').removeClass('hide');
                        obj.css('display', 'block');
                        return;
                    } else {
                        obj.closest('.myTargetClass').addClass('hide');
                        obj.css('display', 'none');
                    }
                }
            });
        });
    });