JSFiddle - React, Tailwind, and code Playground

HTML

<div id="div1" >
  Premier texte 
  <button onclick="document.getElementById('div1').classList.toggle('cache');
  document.getElementById('div2').classList.toggle('cache');">Next</button>
</div>
<div id="div2" class="cache">
  Deuxieme texte 
  <button onclick="document.getElementById('div2').classList.toggle('cache');
  document.getElementById('div3').classList.toggle('cache');">Next</button>
</div>
<div id="div3" class="cache">
  Troisieme texte 
  <button onclick="document.getElementById('div3').classList.toggle('cache');
  document.getElementById('div4').classList.toggle('cache');">Next</button>
</div>
<div id="div4" class="cache">
 Dernier texte 
</div>

CSS

.cache {
    display:none;
}