Checkbox addition and deletion on clicking same checkbox itself

I have list of checkboxes on my left div(id=tree). whenever I click checkbox, the same checkbox has to be copied to opposite div(id=checkbox-content). It should not remove from the left and there should not be any duplicate when copied to opposite div(id=checkbox-content). Any idea? please

HTML

<div id="tree">
    <ul>
    <li><input type="checkbox" value="Node 1"><span class="daredevel-tree-label" style="position: relative;">Node 1</span>
    <ul>
    <li><input type="checkbox" value="Node 1.1"><span class="daredevel-tree-label" style="position: relative;">Node 1.1</span></li>
    <li><input type="checkbox" value="Node 1.2"><span class="daredevel-tree-label" style="position: relative;">Node 1.2</span></li>
    <li><input type="checkbox" value="Node 1.3"><span class="daredevel-tree-label" style="position: relative;">Node 1.3</span></li>
    <li><input type="checkbox" value="Node 1.4"><span class="daredevel-tree-label" style="position: relative;">Node 1.4</span></li>
    </ul></li></ul>
    </div>


    <div id="checkbox-content">

    </div>

Jquery

( function($) {

    $('div#tree input[type="checkbox"]').click(function() {
    // If checked
    var $list = $("div#checkbox-content");

        var $currElem = $(this).clone();
        var $currElemNext = $(this).next().clone();
        var curElemVal = $(this).attr("value");
        var curElemValNext = $(this).next().text();

    if (this.checked) {

        $list.append($currElem);
        $list.append($currElemNext);
    }
    else {
        //hide to the right
        $list.find('input[value="' + curElemVal + '"]').slideUp("fast", function() {
            $(this).remove();

        });

        $list.find('input[value="' + curElemVal + '"] span').slideUp("fast", function() {
            $(this).remove();

        });

    }
});

})( jQuery );