JS Multi Section ListBox
<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 Enter" 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" aria-activedescendant="" aria-multiselectable="true"> </ul> <button id="ex2-delete" class="move-left-btn" aria-keyshortcuts="Alt+ArrowLeft Delete" aria-disabled="true"> Remove </button> </div> <div class="offscreen"> Last change: <span aria-live="polite" id="ms_live_region"></span> </div></div>
Shy Sandpiper