Clone selected option inside another div with jQuery

Question

I have a selectable tree, where i have users, then i want to select them on the left, then click on the button "right" and send it to the right side div, and if i need to remove it from the right side, i want to select it on the right side and click the button "left".

I'm trying for over 2 days but i dont have any idea how to start, can someone help me?

Here's the jsfiddle working, hope that helps understanding.

This its what i have from jquery so far:

$(function () {
    $('#jstree1').jstree({
        "plugins": ["wholerow", "checkbox"]
    });
});

http://jsfiddle.net/JC9gM/

To understand better what i need, here's a example, but i need with the jsTree plugin:

Working example: http://www.akchauhan.com/examples/example01/

Answer 1

I solved a similar problem with this plugin multiselect.js . It is easy to use and if you do not need it to look like a tree, it will work.

<select id="users" multiple="multiple">
    <optgroup label="1">
        <option>1.A</option>
        <optgroup label="1.B">
            <option>1.B.I</option>
            <option>1.B.II</option>
        </optgroup>
    </optgroup>
    <option>2</option>
</select>
<script>
    $('#users').multiSelect({
        selectableOptgroup: true
    });
</script>

Check out the "optgroup" in Demos section to see it working