JSFiddle - React, Tailwind, and code Playground

HTML

<div id="maFen" > 
     <input name="monBouton" id="monBouton" type="button" onClick="$();"value="Action" />
     <input name="monBouton2" id="monBouton2" type="button" onClick="$();"value="Action2" />
     <br><br>
<div id="Conteneur1" ></div>
<div id="Conteneur2" ></div>
<div id="Conteneur3" ></div>
<div id="Conteneur4" ></div>

     <span id="Elem1" >ndvblh</span>
     <span id="Elem2" >vfvggsf</span>
     <span id="Elem3" >mftdrgvn</span>
     <span id="Elem4" >sghtyz</span>    
     <span id="Espace1"> </span>  
     <span id="Espace2"> </span>  
     <span id="Elem5" >ydgdfgdf</span>
     <span id="Elem6" >ydhvcfb</span>
     <span id="Elem7" >lkdgq</span>
     <span id="Elem8" >cvvbffg</span>    
     <span id="Espace5"> </span>  
     <span id="Espace6"> </span> 
     
     
     
     </div>

CSS

#maFen {
   position: absolute; 
   float:left; 
   margin-left:0;
   margin-right:0; 
   padding-left:0;
   padding-right:0; 
   border:0px; 
   width:70%;
   height:70%;
   outline: none;
   background-color: white;
   color:#ffffff;
   font-weight:bold;
   font-size: 26px;
}


#Conteneur1 {
   position: absolute; 
   float:left; 
   top:60px;
   border:13px; 
   width:55%;
   outline: 2px;
   background-color: black;
   color:red;
   font-weight:bold;
   font-size: 18px;
}

#Conteneur2 {
   position: absolute; 
   float:left; 
   top:120px;
   border:13px; 
   width:55%;
   outline: 2px;
   background-color: green;
   color:red;
   font-weight:bold;
   font-size: 28px;
}

#Conteneur3 {
   position: absolute; 
   float:left; 
   top:160px;
   border:13px; 
   width:55%;
   outline: 2px;
   background-color: violet;
   color:black;
   font-weight:bold;
   font-size: 28px;
}

#Conteneur4 {
   position: absolute; 
   float:left; 
   top:200px;
   border:13px; 
   width:55%;
   outline: 2px;
   background-color: yellow;
   color:red;
   font-weight:bold;
   font-size: 28px;
}

JavaScript

$("#monBouton").click(function() {
    
    $( "#Elem1").appendTo($("#Conteneur1"));
    $( "#Espace1").appendTo($("#Conteneur1"));
    $( "#Elem2").appendTo($("#Conteneur2"));
    $( "#Espace2").appendTo($("#Conteneur2"));
    $( "#Elem3").appendTo($("#Conteneur1")); 
    $( "#Elem4").appendTo($("#Conteneur2")); 

    $( "#Elem5").appendTo($("#Conteneur3"));
    $( "#Espace5").appendTo($("#Conteneur3"));
    $( "#Elem6").appendTo($("#Conteneur3"));
    $( "#Elem7").appendTo($("#Conteneur4")); 
    $( "#Espace6").appendTo($("#Conteneur4"));
    $( "#Elem8").appendTo($("#Conteneur4")); 

 }); 

 $("#monBouton2").click(function() {
 
 for (i= 8;i>0;i--) {           
           str = "#Elem" + i;
           jObjDiv = $("#Elem" + i).parents( "div" );
           divID = jObjDiv[0].id;
           alert(str + " est situé dans le "+divID);
         }
 
  });