JSFiddle - React, Tailwind, and code Playground

HTML

<button onclick="select('.item_grupo1','.outroitem_grupo1');">Selecionar itens do grupo 1</button>
<button onclick="select('.item_grupo2','.outroitem_grupo2');">Selecionar itens do grupo 2</button>
<button onclick="select('.item_grupo3','.outroitem_grupo3');">Selecionar itens do grupo 3</button>
<button onclick="unselect('.item_grupo1','.outroitem_grupo1');">Deselecionar itens do grupo 1</button>
<button onclick="unselect('.item_grupo2','.outroitem_grupo2');">Deselecionar itens do grupo 2</button>
<button onclick="unselect('.item_grupo3','.outroitem_grupo3');">Deselecionar itens do grupo 3</button>
    <ul class=listaNaoSelecionados>
      <li class=item_grupo1>item_grupo1</li>
      <li class=item_grupo2>item_grupo2</li>
      <li class=item_grupo3>item_grupo3</li>        
      <li class=outroitem_grupo1>outroitem_grupo1</li>
      <li class=outroitem_grupo2>outroitem_grupo2</li>
      <li class=outroitem_grupo3>outroitem_grupo3</li>        
    </ul>
    
    <ul class=listaSelecionados>
    </ul>

CSS

.listaNaoSelecionados {
  background-color: red;
}
.listaSelecionados {
  background-color: green;
}

JavaScript

function select(ele1,ele2){
  var clone = $(ele1).clone();
  $(ele1).remove();
  $('.listaSelecionados').append(clone);
  var clone2 = $(ele2).clone();
  $(ele2).remove();
  $('.listaSelecionados').append(clone2);
}

function unselect(ele1,ele2){
  var clone = $(ele1).clone();
  $(ele1).remove();
  $('.listaNaoSelecionados').append(clone);
  var clone2 = $(ele2).clone();
  $(ele2).remove();
  $('.listaNaoSelecionados').append(clone2);
}