jQuery 从元素中删除特定文本并将其添加到当前元素？

Question

Lets say I have several Divs and a group of serial numbers. When I click on Div, there's a panel I can pass some numbers into the div; And When I click on the 2nd div, I can pass the same numbers into current one but will remove duplicated numbers from the others.

var arr = [1, 2, 3,...,10]

<div id="panel">
<button>1</button>
<button>2</button>
...
<button>10</button>
</div>

<div id="column">
<div class="card">1, 2</div>
<div class="card active">3, 4, 5, 6, 7</div>
<div class="card">8, 9, 10</div>
</div>

I came up with a problems: Passing the numbers to current div will remove all the others (including those never selected).

$("#panel button").on("click", function(){
        $(this).toggleClass("selected");
        checkSelected()
})

function checkSelected(){
    var arr = [];
    $("#column .card.active").html("");
    for(var i = 0 ; i < $("#panel button .selected").length; i++){
        var num = $("#panel button .selected").eq(i).text()
        arr.push(num)
    }
    arr.sort(function(a, b){
        return a - b;
    });

    for(var j =0; j < arr.length; j++){
        var div = $("#column .card.active");
        var res = '<p>'+arr[j]+'</p>';
        div.append(res);
        // remove others...
        $("#column .card").not( ".active").find("p:contains("+arr[j]+")").filter(function () {
            return $(this).length > 0;
        }).remove();
    }
}

Updated: Just made a sample here jsfiddle

Anyone? Any help? really appreciate it.

Answer 1

Maybe check wether the.remove() at the very end doesn't just discard all the numbers?