jquery - move select box items with groups from one list to another

In the page has two MultiSelect List box with , some items in one box and another one is empty. Able to move items between the two multiselect boxes. We should be even able to move multiple items with group. Here the following example.

<table cellspacing="10" cellpadding="10" border="0">
<tr>
    <td>
        <select multiple id="select1" class="w100p" size="20" maxlength="100">              
            <optgroup label="Group 1">
                <option value="1">Option 1a</option>
                <option value="2">Option 1b</option>
                <option value="2">Option 1c</option>
                <option value="2">Option 1d</option>
                <option value="2">Option 1e</option>
                <option value="2">Option 1f</option>
            </optgroup>
            <optgroup label="Group 2">
                <option value="3">Option 2a</option>
                <option value="4">Option 2b</option>
                <option value="4">Option 2c</option>
                <option value="4">Option 2d</option>
                <option value="4">Option 2e</option>
                <option value="4">Option 2f</option>
                <option value="4">Option 2g</option>
                <option value="4">Option 2h</option>
            </optgroup>
        </select>
    </td>
    <td>
        <a href="#" id="add">add >></a>
        <br>
        <a href="#" id="remove"><< remove</a>
    </td>
    <td>
        <select multiple id="select2" class="w100p" size="20" maxlength="100"></select>
    </td>
</tr>
</table>

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script "text/javascript">
var $select1 = $('#select1');
    var $select2 = $('#select2');

    $([$select1, $select2]).each(function(){
        $(this).find('optgroup').each(function(idx){
            var ogId = 'og' + idx;
            $(this).attr('id', ogId);
            $(this).find('option').each(function(){
                $(this).data('parent', ogId);
            });
        });
    });

    $('#add').click(function() {
        processOptions($select1, $select2);
    });
    $('#remove').click(function() {
        processOptions($select2, $select1);
    });

    var optgFoundInTarget = {};

    function processOptions(source, target) {
        var selectedOptions = $(source).find('option:selected');
        if (selectedOptions.length) {
            selectedOptions.each(function(){
                var movingFromOptGroup = $(this).parent();
                parentOg = $(movingFromOptGroup).attr('id');
                if (parentOg.indexOf('_target') > -1) {
                    parentOg = parentOg.replace('_target', '');
                } else {
                    parentOg += '_target';
                }
                if (typeof optgFoundInTarget[parentOg] == 'object') {
                } else {
                    if (target.find('optgroup#'+parentOg).length) {
                        _el = target.find('optgroup#'+parentOg);
                    } else {
                        _el = $('<optgroup id="' + $(movingFromOptGroup).attr('id') + '_target" label="' + $(movingFromOptGroup).attr('label') + '" />').appendTo(target);
                    }
                    optgFoundInTarget[parentOg] = _el;
                }
                targetOptGroup = optgFoundInTarget[parentOg];
                $(this).data('parent', $(targetOptGroup).attr('id')).appendTo(targetOptGroup);
            });
            $([source, target]).each(function(){
                $(this).find('optgroup').each(function(){
                    $(this).css('display', $(this).find('option').length ? 'inline' : 'none');
                })
            });
            target.val(null);
        }
    }
</script>

OUTPUT: