JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<link rel="stylesheet" href="style.css">

<div class="lista-alunos">
    <h3>Alunos</h3>
    <ol id="lista">
        <li class="aluno" data-id="1">Gabriel | ENG.</li>
        <li class="aluno" data-id="1">Rafael | ENG.</li>
        <li class="aluno" data-id="1">Samuel | ENG.</li>
        <li class="aluno" data-id="1">Alex | ENG.</li>
        <li class="aluno" data-id="1">Ricardo | ENG.</li>
        <li class="aluno" data-id="2">Felipe | ADS.</li>
        <li class="aluno" data-id="2">Cesar | ADS.</li>
        <li class="aluno" data-id="2">Pedro | ADS.</li>
        <li class="aluno" data-id="2">Maria | ADS.</li>
        <li class="aluno" data-id="2">Ana | ADS.</li>
        <li class="aluno" data-id="3">Lucas | ARQ.</li>
        <li class="aluno" data-id="3">Miguel | ARQ.</li>
        <li class="aluno" data-id="3">David | ARQ.</li>
        <li class="aluno" data-id="3">Julia | ARQ.</li>
        <li class="aluno" data-id="3">Alice | ARQ.</li>
    </ol>
</div>

<div class="lista-grupo">
    <h3>Grupo</h3>
    <ol id="grupo">
        <li class="lider" data-id="1">Eu | ENG.</li>
    </ol>
</div>

CSS

.lista-alunos,
  .lista-grupo {
      position: relative;
      float: left;
      display: block;
      width: 270px;
      height: 270px;
      padding: 10px;
      margin-right: 10px;
      border: 1px solid #ccc;
      background-color: #F7F7F7;
  }
  
  #lista {
      overflow-y: scroll;
      height: 205px;
  }
  
  #lista,
  #grupo {
      padding-left: 20px;
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      -khtml-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
  }
  
  .aluno,
  .lider {
      margin: 3px;
      padding: 4px;
      cursor: pointer;
  }
  
  .aluno {
      background: #CACACA;
  }
  
  .selecionado,
  .lider {
      background: #A1B3A1;
  }

JavaScript

$(function() {
    $(".aluno").click(function() { //EVENTO CLICK
        var aluno = this;
        var campo = aluno.parentElement.id == 'lista' ? '#grupo' : '#lista';
        var alunosGrupo = $("#grupo li");
		
        if (aluno.parentElement.id == 'lista') {
            var duplos = alunosGrupo.get().filter(function(el) {
                return aluno.dataset.id == el.dataset.id;
            });
            if (duplos.length > 1) return;
        }
        if (alunosGrupo.length <= 5) $(campo).append(aluno); //ANEXA NA DIV GRUPO
		else return;
		
		aluno.classList.toggle('selecionado');
    });
});