JSFiddle - React, Tailwind, and code Playground

HTML

<input id="Treatment" type="button" onclick="$();" value="Treatment" />
 <div id="modal" class="popup"></div>  
<div id="Div1"></div>
<div id="Div2">  
  
</div>

CSS

#Div1 {
    background-color: black;
    height: 100px;
    margin: 100px;
    width: 100px;    
}

#Div2 {
    background-color: green;
    height: 100px;
    margin: 100px;
    width: 100px;
    color:yellow;
}


/*------------------POPUPS------------------------*/
#fond {
   position:absolute;
   z-index:9000;
   background-color:darkgoldenrod;
   display:none;
   border-radius: 10px;
}

.popup {
   position:fixed;
   width:440px;
   height:200px;
   display:none;
   z-index:9999;
   padding:20px;
   border-radius: 10px;
   background-color: white;
   border: 1px solid grey;
}

#modal {
   width:300px;
   height:200px;
   visibility:visible;
}

/*------------------FIN DE LA POPUPS------------------------*/

JavaScript

$('#fond, .popup').hide();
 
  $("#Treatment").on("click", $('#fond, .popup').show(), function () { 
   
  maFonction ($('#fond, .popup').hide());
  
 function maFonction () {
 var i = 1;
 $('#Div2').show(000,function(){ 
 $("#Div1").hide(000,function(){      
 //alert("Ok");
 
 while (i<1100000) {
 
 $('#Div2').text(i);
 i++;
 
 };

 
});
});
};

});