JSFiddle - React, Tailwind, and code Playground

HTML

<div id="visu">  
             <div id="element"  name="0" class="element">
                <div id="porteVisuNom" class="porteVisuNom">
                    <p id="visuNom" class="visuNom">Element 0</p>
                </div>   
         </div> 
           
        </div>
        <button id="clone">clone</button>

CSS

#clone{
         position : fixed;
         top:20px;
         left:46%;
         font-size:20px;
         width:9%;  
         z-index:15;
        display:flex;
        flex-direction: row;
        justify-content: center;
         text-align:center;
         padding-right:5px;
          padding-left:5px; 
    }
    
         
         #visu {
             position:fixed;
             top:100px;
            width:90%;   
            z-index;1;
            margin-top:5px;
             height:68%;
            margin-left:6.5%;
            display:flex;
            flex-flow: row wrap;
            align-content:flex-start;
            justify-content:flex-start;  
             // background-color:yellow;
             overflow:scroll;
        }
       
          .element {
              display: flex;
              flex-direction: column;
              justify-content:center;
             //box-shadow: 3px 3px 3px #4d4d4d;
             // border-radius: 10px;
              padding-left:10px;
              padding-right:10px;
              margin-bottom:25px;
              margin-right:20px;
              width:31%;
              z-index:20;
            //  height:50%
      
      } 
   
          .porteVisuNom {
          display: flex;
          flex-direction: column;
          justify-content:center;
          align-items: center;
          background-color: white;
          border: 7px solid limegreen;
          border-radius: 10px;
         // padding-left:5px;
         // padding-right:5px;
        // width:25%;
          height: 170px;
         // margin: 5px 0px;
        margin-bottom:8px;
        //overflow:scroll;
          
      } 
   
      .visuNom {
         font-family:"Helvetica Neue";
         padding-top:8px;  
        padding-bottom:8px;  
         padding-left:10px;
         padding-right:10px;
         color:black;			     
		 line-height:110%;
         text-align:center; 
         font-size:2.5em;  
         // width:260px;
      }

JavaScript

var totalElements=0;
    
  $("#clone").click(function(){
  console.log(totalElements);
      totalElements++;
      $("#element").clone().attr('id','element' +totalElements).appendTo("#visu").hide().fadeIn(2200, 'swing');
      var leNom = "Element" + totalElements;
     //je voudrais que le p visuNom affiche la variable leNom
     document.getElementById('element' +totalElements).firstElementChild.firstElementChild.innerHTML=leNom;
     });