JSFiddle - React, Tailwind, and code Playground

HTML

<input id="Change" type="button" value="Change" /> 
    <BR>
    <BR>  
    <div id="Conteneur1" align="center">
    <input id="maVal" type="hidden" value="100" /> 
    <div id="Conteneur2" align="center"> 
    </div>
    </div>

CSS

#Change {
    word-wrap: break-word;
    overflow: hidden;
    padding-top:0%;
    padding-bottom:0%;
    padding-left:0%;
    padding-right:0%;
    background:red;
    color:white; 
    width:250px;
}


#Conteneur1 {
    word-wrap: break-word;
    overflow: hidden;
    padding-top:0%;
    padding-bottom:0%;
    padding-left:2%;
    padding-right:2%;
    height: 300px;
    width: 250px;
    background:grey;
    color:white;
  border:0;
  line-height: 1.5em; 
  text-align: justify;
  cursor:pointer;  
}

JavaScript

$("#Change").on("click", function () { 

  
   
  if ($('#maVal').val()==="100") {
       alert($('#maVal').val());
       $('#maVal').val("75");
      
      }  else if ($('#maVal').val()==="75"){      
         alert($('#maVal').val()); 
         $('#maVal').val("100");
         };
   });