JSFiddle - React, Tailwind, and code Playground

HTML

<!-- These should be in head -->
    <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css" rel="stylesheet" />
    <link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.min.css" rel="stylesheet" />
    <!-- Body content -->
    <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" data-selected-text-format="count" data-actions-box="true" multiple="multiple" title="Choose...">
                    <option value="1">1</option>
                    <option value="2" selected>2</option>
                    <option value="3">3</option>
                    <option value="4" selected>4</option>
                </select>
            </div>
        </div>
    </div>
    <div class="row hide">
        <div class="col-sm-12">
            <div class="form-group">
                <label for="feedback_q1_desc">desc <span class="glyphicon glyphicon-pencil"></span>
    
                </label>
                <textarea name="feedback_q1_desc" id="feedback_q1_desc" class="form-control" data-toggle="tooltip" data-placement="top" title="אנא פרט" rows="2"></textarea>
            </div>
        </div>
    </div>
    <!-- These should be at the end of <body> -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.min.js"></script>

CSS

.hide {
    display: none;
}

JavaScript

// Check a select for a specific value and show/hide div based on selection
    // Select will come in as a jQuery object
    function checkSelect(control) {
        
        // Build selector for associated description field
        var selector = '#' + control.attr('id') + '_desc';
        
        // Handle scenario where nothing is selected
        if (control.val() == null) {
            $(selector).parent().parent().parent().addClass('hide');
            $(selector).css('display', 'none');
            return;
        }
        
        // Get array containing selected values
        var vals = control.val();
        
        // Handle scenario where something is selected
        for (i = 0; i < vals.length; i++) {
            if (control.val()[i] == "4") {
                $(selector).parent().parent().parent().removeClass('hide');
                $(selector).css('display', 'block');
                return; // Stop checking as we know the value we want is selected
            } else {
                $(selector).parent().parent().parent().addClass('hide');
                $(selector).css('display', 'none');
            }
        }
    }
    
    // This runs when the DOM is ready
    $(function () {
        
        // Bind selectpicker
        $('.selectpicker').selectpicker();
        
        // Iterate through all multiple selects
        $('select[multiple]').each(function () {
            
            // Check for pre-selected values when page first loads
            checkSelect($(this));
            
            // Bind to change event so that values are checked after something is changed
            $(this).change(function () {
                checkSelect($(this));
            });
        });
    });