JSFiddle - React, Tailwind, and code Playground

by mcgrailm

HTML

<fieldset>
        <div class="transfer">
            <select class="given" multiple="multiple" size="10">
                <option value="15">item 15</option>
            </select>
        </div>
        <div class="transfer">
            <ul>
                <li><input type="button" value="Add&gt;&gt;" class="allow"  /></li>
                <li><input type="button" value="&lt;&lt; Remove" class="deny"  /></li>
            </ul>

        </div>
        <div class="transfer">
            <select class="allowed" multiple="multiple" size="10">
                        <option value="16">option 16</option>
                            <option value="13">option 13</option>

                            <option value="7">option 7</option>
                            <option value="8">option 8</option>
                            <option value="21">option 21</option>
                            <option value="17">option 17</option>
                            <option value="20">option 20</option>
                            <option value="19">option 19</option>

                            <option value="18">option 18</option>
                            <option value="2">option 2</option>
                            <option value="12">option 12</option>
                            <option value="22">option 22</option>
                            <option value="23">option 23</option>
                            <option value="5">option 5</option>

                        </select>
        </div>
    </fieldset>
        <fieldset>
        <div class="transfer">
            <select name="privileges" class="given" multiple="multiple" size="10">
                <option value="280">item 280</option>
                <option value="278">item 278</option>
                <option value="272">item 272</option>
             </select>
        </div>
        <div class="transfer">
            <ul>
                <li><input type="button" value="Add&gt;&gt;" class="allow"  /></li>
     ...

CSS

fieldset{margin:0 0 10px 0;padding:10px;background:#EBEBEB;}
fieldset.thumb{background:#AFA;}
fieldset > ul > li{padding:4px 0;}
fieldset .categorylabel{font-weight:bold;padding:0 0 5px 0;}
fieldset p.add{cursor:pointer;float:right;width:40px;padding:0 0 0 5px;background:url('/secure/img/add.png') no-repeat;background-position:right center;position:relative;}
fieldset p.remove{background:url('/secure/img/remove.gif') no-repeat;cursor:pointer;float:right;top:-17px;left:23px;position:relative;width:8px;height:10px;}
fieldset.accordion > label div{cursor:pointer;display:inline;float:left;margin:2px 2px 0 0;}
fieldset.horizontal{float:left;margin-right:10px;}
fieldset.vertical{clear:both;}
fieldset div.imagecontainer > p {text-align:center;}
fieldset .accordion_open{float:left;width:13px;height:12px;background:url('/secure/img/accordion.gif') no-repeat;background-position:0px 0px;position:relative;}
fieldset .accordion_closed{float:left;width:13px;height:12px;background:url('/secure/img/accordion.gif') no-repeat;background-position:0px -12px;position:relative;}
.transfer,.columns{float:left;margin:10px;}
.transfer input{margin:40px 0px 30px 0px;}

JavaScript

$('.allow').click(function() {
        var pr = $(this).closest('fieldset');
        $('.given option:selected', pr).remove().appendTo('.allowed', pr);
    
        var my_options = $(".allowed option",pr);
        my_options.sort(function(a,b) {
            if (a.text > b.text) return 1;
            else if (a.text < b.text) return -1;
            else return 0
        })

        $(".allowed",pr).empty().append( my_options );
        return false;  
    });

    $('.deny').click(function() {
        var pr = $(this).closest('fieldset');  
        $('.allowed option:selected',pr).remove().appendTo('.given',pr);

        var my_options = $(".given option",pr);
        my_options.sort(function(a,b) {
            if (a.text > b.text) return 1;
            else if (a.text < b.text) return -1;
            else return 0
        })

        $(".given",pr).empty().append( my_options );
 
        return false;
    });