JSFiddle - React, Tailwind, and code Playground

HTML

<input name="Action" id="Action" type="button" value="Action" /><br>
<div id="ListeMot" ></div>
<div id="ListeMot2" ></div>

JavaScript

$("#Action").one('click', function () {

	// 1/ on cre la liste de mot
	 // chaque mot est 
	$( "#ListeMot" ).append(
	'<span data-id="1" class="clickable">Mot1 </span>',
	'<span data-id="2" class="clickable">Mot2 </span>',
	'<span data-id="3" class="clickable">Mot3 </span>',
	'<span data-id="4" class="clickable">Mot4 </span>',
	'<span data-id="5" class="clickable">Mot5 </span>',
	'<span data-id="6" class="clickable">Mot6 </span>'
	);
 
	// on compte les data-id
	var idMax = 0;
	$( "#ListeMot .clickable" ).each(function(){
		idMax = Math.max( idMax, $(this).attr('data-id') );
	});
 
	$( "#ListeMot, #ListeMot2" ).on( "click", ".clickable", function( ev ){
		var id = $(this).attr('data-id');
		idMax++; // on incrémente le data-id
		$(this).attr('data-id',idMax); // on applique le data-id max (de l'élément en cours) avant clonage
		$(this).clone().appendTo("#ListeMot2"); // on clone (avec le nouveau data-id max)
		$(this).attr('data-id',id); // on rétablit le data-id de l'élément en cours à sa valeur initiale
	});
 
});