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 () {
        $('#feedback_q1').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');
                }
            }
        });
    });