JSFiddle - React, Tailwind, and code Playground

by TCloud

HTML

<div class="modal-window active" id="modal-1">
  <form action="">
    <input type="text" id="user-name" placeholder="Enter your name">
    <button type="button" id="next-step">
      Next
    </button>
  </form>
</div>

<div class="modal-window" id="modal-2">
  <form action="">
    <h2 class="user-name"></h2>
  
    <input type="email" id="user-email" placeholder="Enter your email">
    <button type="button" id="next-step">
      Done
    </button>
  </form>
</div>

SASS

.modal-window
  display: none
  background-color: #34495e
  border-radius: 7px
  text-align: center
  padding: 50px
  box-sizing: border-box
  color: white
  
.active
  display: block

JavaScript

$("#next-step").click(function(){
	let form = $(this).parent()
  let data = {
  	name: form.find("input").val()
  }
  
  closeModal($("#modal-1"))
  openModal($("#modal-2"), data)
})

function openModal(elem, data = ""){
	$(elem).css("display", "block")
  $(elem).find("h2").text(`Hello, ${data.name}`)
}

function closeModal(elem){
	$(elem).css("display", "none")
}