JSFiddle - React, Tailwind, and code Playground

HTML

<select multiple="multiple" name="test" id="options" size="15" class="form-select" onchange="optionCheck()">
    <option value="1">option 1</option>
    <option value="2">option 2</option>
</select>

<div id="help1" class="helpText" style="display:none;">help text 1</div>
<div id="help2" class="helpText" style="display:none;">help text 2</div>
 <script type="text/javascript">
      function optionCheck() {
    var i, len, optionVal, helpDiv,
        selectOptions = document.getElementById("options");
        

    // loop through the options in case there
    // are multiple selected values
    for (i = 0, len = selectOptions.options.length; i < len; i++) {

        // get the selected option value
        optionVal = selectOptions.options[i].value;

        // find the corresponding help div
        helpDiv = document.getElementById("help" + optionVal);
        var clase = document.getElementsByClassName("helpText");

        // move on if we didn't find one
        if (!helpDiv) { continue; }

        // set CSS classes to show/hide help div
        if (selectOptions.options[i].selected) {
            clase[i].style.display = "block";
        } else {
            clase[i].style.display = "none";
        }
    }    
}

        
      </script>

CSS

/* consider "display: none/block" instead of visibility: hidden/visible
       if you don't want the hidden divs to occupy space */