JSFiddle - React, Tailwind, and code Playground

by fractorr

HTML

<div style="float: left; clear: none;">
			All<br>
			<select name="All" id="All" size="8" multiple="multiple">
						<option value="1">Option 1</option>
						<option value="2">Option 2</option>
						<option value="3">Option 3</option>
						<option value="4">Option 4</option>
			</select>
		</div>

		<div style="float: left; clear: none; margin-top: 21px;">
            <input type="button" id="add" value="Add" />
			<br>
                <input type="button" id="remove" value="Remove" />
		</div>
				
		<div style="float: left; clear: none;">
			Selected<br>
			<select name="Featured" id="Featured" size="8" multiple="multiple">
					<option value="5">Option 5</option>
					<option value="6">Option 6</option>
			</select>
		</div>

		<div style="float: left; clear: none; margin-top: 21px;">
            <input type="button" id="up" value="Move Up" />
			<br>
            <input type="button" id="down" value="Move Down" />
		</div>

CSS

input[type="button"] {
    width: 100px;
}

JavaScript

var selectManager = new Class({
        Implements: [Options],	
        
        options: {
            src: null,
            dst: null,
            max: 0,
            
            addBtn: null,
            removeBtn: null,
            upBtn: null,
            downBtn: null
        },
        
        initialize: function(options) {
            var self = this;
            
            this.setOptions(options);
            
            self.options.addBtn.addEvent('click', function() {
                self.options.src.getSelected().each(function(el) {
                    if (!self.options.max || self.options.dst.length < self.options.max) {
                        el.inject(self.options.dst);
                    }
                });
            }); 
    
            self.options.removeBtn.addEvent('click', function() {             
                self.options.dst.getSelected().each(function(el) {         
                    el.inject(self.options.src);                       
                });                                                        
            });                                                            
    
            self.options.upBtn.addEvent('click', function() {
                self.options.dst.getSelected().each(function(el) {
                    self.moveOptionUp(el);
                });
            });                                                            
    
            self.options.downBtn.addEvent('click', function() {
                self.options.dst.getSelected().reverse().each(function(el) {
                    self.moveOptionDown(el);
                });
            });                                                            
        },
    
        moveOptionDown: function(opt) {
            var el = $(opt).clone();
            
            if ($(opt).getNext()) {
                var swap = $(opt).getNext().clone();
                
                el.replaces($(opt).getNext());
               ...