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>