js multi section listbox
<p> Rank features important to you when choosing where to live. If a feature is unimportant, move it to the unimportant features list.</p><div class="listbox-area"> <div class="left-area"> <span id="ss_imp_l"> Important Features: </span> <ul id="ss_imp_list" tabindex="0" role="listbox" aria-labelledby="ss_imp_l"> <li id="ss_opt1" role="option"> Proximity of public K-12 schools </li> <li id="ss_opt2" role="option"> Proximity of child-friendly parks </li> <li id="ss_opt3" role="option"> Proximity of grocery shopping </li> <li id="ss_opt4" role="option"> Proximity of fast food </li> <li id="ss_opt5" role="option"> Proximity of fine dining </li> <li id="ss_opt6" role="option"> Neighborhood walkability </li> <li id="ss_opt7" role="option"> Availability of public transit </li> <li id="ss_opt8" role="option"> Proximity of hospital and medical services </li> <li id="ss_opt9" role="option"> Level of traffic noise </li> <li id="ss_opt10" role="option"> Access to major highways </li> </ul> <div role="toolbar" aria-label="Actions" class="toolbar"> <button id="ex1-up" class="toolbar-item selected" aria-keyshortcuts="Alt+ArrowUp" aria-disabled="true"> Up </button> <button id="ex1-down" class="toolbar-item" tabindex="-1" aria-keyshortcuts="Alt+ArrowDown" aria-disabled="true"> Down </button> <button id="ex1-delete" class="toolbar-item move-right-btn" tabindex="-1" aria-keyshortcuts="Alt+ArrowRight Delete" aria-disabled="true"> Not Important </button> </div> </div> <div class="right-area"> <span id="ss_unimp_l"> Unimportant Features: </span> <ul id="ss_unimp_list" tabindex="0" role="listbox" aria-labelledby="ss_unimp_l" aria-activedescendant=""> </ul> <button id="ex1-add" class="move-left-btn" aria-keyshortcuts="Alt+ArrowLeft Enter" aria-disabled="true"> Important </button> </div> <div class="offscreen"> Last change: <span aria-live="polite" id="ss_live_region"></span> </div></div><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>