JSFiddle - React, Tailwind, and code Playground

HTML

<p>
    Choose upgrades for your transport capsule.
  </p>
  <div class="listbox-area">
    <div class="left-area">
      <span id="ms_av_l">
        Available upgrades:
      </span>
      <ul id="ms_imp_list"
        tabindex="0"
        role="listbox"
        aria-labelledby="ms_av_l"
        aria-multiselectable="true">
        <li id="ms_opt1"
          role="option"
          aria-selected="false">
          Leather seats
        </li>
        <li id="ms_opt2"
          role="option"
          aria-selected="false">
          Front seat warmers
        </li>
        <li id="ms_opt3"
          role="option"
          aria-selected="false">
          Rear bucket seats
        </li>
        <li id="ms_opt4"
          role="option"
          aria-selected="false">
          Rear seat warmers
        </li>
        <li id="ms_opt5"
          role="option"
          aria-selected="false">
          Front sun roof
        </li>
        <li id="ms_opt6"
          role="option"
          aria-selected="false">
          Rear sun roof
        </li>
        <li id="ms_opt7"
          role="option"
          aria-selected="false">
          Privacy cloque
        </li>
        <li id="ms_opt8"
          role="option"
          aria-selected="false">
          Food synthesizer
        </li>
        <li id="ms_opt9"
          role="option"
          aria-selected="false">
          Advanced waste recycling system
        </li>
        <li id="ms_opt10"
          role="option"
          aria-selected="false">
          Turbo vertical take-off capability
        </li>
      </ul>
      <button id="ex2-add"
            class="move-right-btn"
            aria-keyshortcuts="Alt+ArrowRight Delete"
            aria-disabled="true">
        Add
      </button>
    </div>
    <div class="right-area">
      <span id="ms_ch_l">
        Upgrades you have chosen:
      </span>
      <ul id="ms_unimp_list"
        tabindex="0"
        role="listbox"
        aria-labelledby="ms_ch_l"
  ...

JavaScript

$('#lb').change(function() { 

    var x = $(this).scrollTop();

    $('#lb option:selected').each(function() { 
        var groupName = $(this).attr('group'); 
        if (groupName !== undefined) { 
            $('#lb option[group=' + groupName + ']').each(function() { 
                this.selected = true; 
            }); 
        }

    }); 

     $(this).scrollTop(x); 
} );