JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
  <li id="1">Teste 1</li>
  <li id="2">Teste 2</li>
  <li id="3">Teste 3</li>
  <li id="4">Teste 4</li>
  <li id="5">Teste 5</li>
  <li id="6">Teste 6</li>
  <li id="7">Teste 7</li>
  <li id="8">Teste 8</li>
  <li id="9">Teste 9</li>
  <li id="10">Teste 10</li>
</ul>
<a href="#" id="show">Exibir selecionados</a>
<div id="retorno"></div>

CSS

li{list-style: none;
padding: 5px;background: gray;; text-align: center; color: #fff; border-bottom: 1px solid #000; cursor: pointer;
 -webkit-user-select: none;
  -moz-user-select: none;  
  -ms-user-select: none; 
  user-select: none; 
}
ul{padding: 0;margin:0; margin-top: 10px}
body{margin:0; margin:0}
.active{background: red;}

JavaScript

$(function(){
  var idsSelecionados = [];
  $('li').click(function(){
   var id = $(this).attr('id');
   idsSelecionados.push(id);
   $(this).toggleClass("active");  
  });
    
    $('#show').on('click', function(){
        $.each(idsSelecionados, function(i, val){
          $('#retorno').append(val);
        });
    });
});