JSFiddle - React, Tailwind, and code Playground

by Dedi Wibisono

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
 <!-- Modal Trigger -->
  <a class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>

  <!-- Modal Structure -->
  <div id="modal1" class="modal">
    <div class="modal-content">
    <div class="stepOne center-align">
      <p>You request barcode number</p>
      <button class="btn waves-effect waves-light" type="submit" id="stepOne">Next</button>  
    </div>

    <div class="stepTwo" style="display: none;">
      <h4>Modal Header 2</h4>
      <p>Step two</p>
      <button class="btn waves-effect waves-light" type="submit" id="stepTwo">Next</button> 
    </div>
    
    <div class="stepThree" style="display: none;">
      <h4>Modal Header 3</h4>
      <p>Step three</p>
      <button class="btn waves-effect waves-light" type="submit" id="stepThree">Next</button> 
    </div>
    
    <div class="stepFour" style="display: none;">
      <h4>Modal Header 4</h4>
      <p>Step four</p>
      <button class="btn waves-effect waves-light" type="submit" id="stepThree">Next</button> 
    </div>
    
    <div class="modal-footer">
      <a href="#!" class="modal-close waves-effect waves-green btn-flat">Close</a>
    </div>
  </div>

JavaScript

$(".modal").modal();

$("#stepOne").click(function(){
  $(".stepOne").hide();
  $(".stepTwo").show()
})

$("#stepTwo").click(function(){
  $(".stepOne").hide();
  $(".stepTwo").hide();
  $(".stepThree").show();
})

$("#stepThree").click(function(){
  $(".stepOne").hide();
  $(".stepTwo").hide();
  $(".stepThree").hide();
  $(".stepFour").show();
})