añadir y quitar multiples data, luego recuperarlos

[saulhm]

Buen día

Tengo un problema que no logro resolver y por eso acudo a la ayuda del foro. Expongo lo que llevo:

Tengo un contenedor vacío y junto a el una lista de N números. Si le doy click a cualquier número este se añade al contenedor, si le vuelvo a dar click el número se quita del contenedor, con lo que el número nunca será repetido en el contenedor.

Cuando ya tengo los números que quiero en el contenedor debo saber cuales son para hacer cualquier cosa con ellos, como enviarlos por ajax, y ahí es donde me trabo. Probé con array, pero como cada número tiene su propia función el array queda contenido en esta.

Copio las partes del código:

Código HTML:

<div id="contenedor"></div>

<a class="numero" value="5">5</a>
<a class="numero" value="10">10</a>
<a class="numero" value="15">15</a>
<a class="numero" value="20">20</a> 

Código:

<script>
    $(function () {
      $('.numero').click(function () {
        // definimos las variables
        var digito  = $(this).attr("value");
        var clicked = $(this).data("clicked");
        var datanumero = '<span id="num' + digito + '" >' + digito + '</span>';

        // verificamos si se ha dado click o no
        if (clicked) {
          $("#contenedor").find('#num' + digito).remove();
          // [missing] pongo el data en el contenedor
        } else {
          $('#datafield').append(datanumero);
         // [missing] quito el data del contenedor
        }
        
        // revertimos el valor de clicked
        $(this).data("clicked", !$(this).data("clicked"));
      });
    });

//[missing] recuperar todos los datas del contenedor 
  </script>

Agradezco de antemano cualquier ayuda que me puedan proporcionar.