Transferring rows from table 1 to table 2 issue.

bruteforce

I got two tables Table 1 and Table 2. Table 1 is the source table and Table 2 is the new table.

I used the examples for transferring table rows to another table. It works find but I encountered an issue. When I click the transfer on Table 1 and Table 2 is full (paging is activated), the row transfers but it also copies the row to Table 1.

This are my codes:

function addContact(element) {
    var form = '#frmContactList';
    //setAction
    setAction(form, 'addContact');
    //push another data to serialize form
    var conGroupID = $('#conGroupID').val();
    var personnelID = $(element).attr('arial-label');
    var targetID = 'result'+personnelID;
//do some ajax here
    //remove from UI and transfer
    var table1 = $('#tblSelectedContact').DataTable();
    var table2 = $('#contactGroupList').DataTable();
    var tr = $(element).closest("tr");
    tr.find("input[type=button]").attr("class", "button tiny alert");
    tr.find("input[type=button]").attr("value", "Remove");
    tr.find("input").attr("onclick", "removeContact(this)");
    var row = table1.row(tr);
    var rowNode = row.node();
    row.remove();
    //add row to second table;
    table2
    .row.add(rowNode)
    .draw();

}

function removeContact(element) {

    //update contact list
    var form = '#frmGroupList';
    //setAction
    setAction(form, 'removeContact');
    //push another data to serialize form
    var conGroupID = $('#conGroupID').val();
    var personnelID = $(element).attr('arial-label');
    var targetID = 'delResult';
// do some ajax here
    //remove from table
    var table2 = $('#contactGroupList').DataTable();
    var row = table2.row($(element).closest("tr"));
    row.remove().draw();
}