JSFiddle - React, Tailwind, and code Playground

HTML

<div id="sourceList">
    <div class="notadded" id="1"><input type="checkbox" />Varname and varlabel 1</div>
    <div class="notadded" id="2"><input type="checkbox" />Varname and varlabel 2</div>
    <div class="notadded" id="3"><input type="checkbox" />Varname and varlabel 3</div>
    <div class="notadded" id="4"><input type="checkbox" />Varname and varlabel 4</div>
    <div class="notadded" id="5"><input type="checkbox" />Varname and varlabel 5</div>
    <div class="notadded" id="6"><input type="checkbox" />Varname and varlabel 6</div>
    <div class="notadded" id="7"><input type="checkbox" />Varname and varlabel 7</div>
    <div class="notadded" id="8"><input type="checkbox" />Varname and varlabel 8</div>
    <div class="notadded" id="9"><input type="checkbox" />Varname and varlabel 9</div>
</div>

<input id="moveBtn" type="button" value="Move them!"/>
<input id="removeBtn" type="button" value="Remove them!"/>

<div id="targetList"></div>

CSS

#sourceList {
    background-color: #0099cc;
}

#targetList {
    background-color: #00fff0;
}

JavaScript

function move( sourceSelector, targetSelector ) {
    var selectedItens = $( sourceSelector + " .notadded input:checked" );
    selectedItens.attr( "checked", false );
    $( targetSelector ).append( selectedItens.parent() );
}

$(function() {
    $( "#moveBtn" ).click(function(){
        move( "#sourceList", "#targetList" );
    });
    
    $( "#removeBtn" ).click(function(){
        move( "#targetList", "#sourceList" );
    });
});