JSFiddle - React, Tailwind, and code Playground

by johnny000

HTML

<div></div>

CSS

* {
    font-family:arial;
}
.list {
    width: 200px;
    height: 300px;
    border: 1px solid;
    float: left;
    overflow:auto;
}
#buttons {
    float:left;
    padding:10px;
}
#buttons span {
    display:block;
    border: 1px solid;
    padding:10px;
    margin:5px 0;
    cursor:pointer;
}
.list .selection {
    background: #CCC;
    display: block;
    padding: 5px;
    cursor: pointer;
}
.list .selection.active {
    background:green;
}

JavaScript

(function ($) {
    $.fn.listselector = function (options) {
        var dataHandler = {
            generateElemets: function (data) {
                var input = "";
                if (data) {
                    for (var i = 0; i < data.length; i++) {
                        input += this.createElement(data[i]);
                    }
                }
                return input;
            },
            createElement: function (object) {
                var element = '';
                var keys = '';
                if (object) {
                    element += '<span class="selection" ';
                    for (var key in object) {
                        element += 'data-' + key + '="' + object[key] + '" ';
                    	keys += key + ",";
                    }
                    element += ' data-keys="'+ keys +'">' + object.name + '</span>';
                }
                return element;
            }
        }
        var template = '<inputlist id="selection_list" data-target="#selected_list" class="list">' + dataHandler.generateElemets(options.input) +
            '</inputlist>' +
            '<div id="buttons">' +
            '<span class="add">></span>' +
            '<span class="remove"><</span>' +
            '</div>' +
            '<outputlist id="selected_list" class="list" data-target="#selection_list">' + dataHandler.generateElemets(options.output) +
            '</outputlist>';
        this.html(template);
        return this;
    }
    $.fn.listselector.defaultOptions = {
    	selectionClass: "selection"
    };
    var options = {
    	input : [{name: "CF_SIZE", type: "varchar"},
                 {name: "CF_GENDER", type: "varchar"},
                 {name: "price_old", type: "varchar"}],
        output: {}
    }
    $("div").listselector(options);



    var $element = null;
    $(document).on("click", ".list span", function (e) {
        if ($element) {
            $element.removeClass("active");
        }
        $element =...