PHP - how to display user inputs multiform before inserting to database

var currentTab = 0; // Current tab is set to be the first tab (0)
showTab(currentTab); // Display the crurrent tab

function showTab(n) {
 // This function will display the specified tab of the form...
 var x = document.getElementsByClassName("tab");
 x[n].style.display = "block";
 //... and fix the Previous/Next buttons:
 if (n == 0) {
 document.getElementById("prevBtn").style.display = "none";
 } else {
 document.getElementById("prevBtn").style.display = "inline";
 }
 if (n == (x.length - 1)) {
	 showData();
 document.getElementById("nextBtn").innerHTML = "Submit";
 } else {
 document.getElementById("nextBtn").innerHTML = "Next";
 }
 
 //... and run a function that will display the correct step indicator:
 fixStepIndicator(n)
}

function nextPrev(n) {
 // This function will figure out which tab to display
 var x = document.getElementsByClassName("tab");
 // Exit the function if any field in the current tab is invalid:
 if (n == 1 && !validateForm()) return false;
 // Hide the current tab:
 x[currentTab].style.display = "none";
 // Increase or decrease the current tab by 1:
 currentTab = currentTab + n;
 // if you have reached the end of the form...
 if (currentTab >= x.length) {
 // ... the form gets submitted:
 document.getElementById("regForm").submit();
 return false;
 }
 // Otherwise, display the correct tab:
 showTab(currentTab);
}

function validateForm() {
 // This function deals with validation of the form fields
 var x, y, i, valid = true;
 x = document.getElementsByClassName("tab");
 y = x[currentTab].getElementsByTagName("input");
 // A loop that checks every input field in the current tab:
 for (i = 0; i < y.length; i++) {
 // If a field is empty...
 if (y[i].value == "") {
 // add an "invalid" class to the field:
 y[i].className += " invalid";
 // and set the current valid status to false
 valid = false;
 }
 }
 // If the valid status is true, mark the step as finished and valid:
 if (valid) {
 document.getElementsByClassName("step")[currentTab].className += " finish";
 }
 return valid; // return the valid status
}

function fixStepIndicator(n) {
 // This function removes the "active" class of all steps...
 var i, x = document.getElementsByClassName("step");
 for (i = 0; i < x.length; i++) {
 x[i].className = x[i].className.replace(" active", "");
 }
 //... and adds the "active" class on the current step:
 x[n].className += " active";
}

function showData(){
	document.getElementById("reason").innerHTML=document.getElementsByName("reason")[0].value;
	document.getElementById("doctor").innerHTML=document.getElementsByName("doctor")[0].value;
	document.getElementById("bookingdate").innerHTML=document.getElementsByName("bookingdate")[0].value;

	document.getElementById("fname").innerHTML=document.getElementsByName("fname")[0].value;
	document.getElementById("lname").innerHTML=document.getElementsByName("lname")[0].value;
	document.getElementById("gender").innerHTML=document.getElementsByName("gender")[0].value;
	document.getElementById("email").innerHTML=document.getElementsByName("email")[0].value;
	document.getElementById("phone").innerHTML=document.getElementsByName("phone")[0].value;
}

* {
 box-sizing: border-box;
}

body {
 background-color: #f1f1f1;
}

#regForm {
 background-color: #ffffff;
 margin: auto;
 font-family: Raleway;
 padding: 40px;
 width: 70%;
 min-width: 300px;
 border: 3px solid #f1f1f1;
}

h1 {
 text-align: center; 
}

input {
 padding: 10px;
 width: 100%;
 font-size: 17px;
 font-family: Raleway;
 border: 1px solid #aaaaaa;
}

select {
 padding: 10px;
 width: 100%;
 font-size: 17px;
 font-family: Raleway;
 border: 1px solid #aaaaaa;
}

/* Mark input boxes that gets an error on validation: */
input.invalid {
 background-color: #ffdddd;
}

/* Hide all steps by default: */
.tab {
 display: none;
}

button {
 background-color: #2ea3f2;
 color: #ffffff;
 border: none;
 padding: 10px 20px;
 font-size: 17px;
 font-family: Raleway;
 cursor: pointer;
 margin-top: 15px;
}

button:hover {
 opacity: 0.8;
}




#prevBtn {
 background-color: #bbbbbb;
}

/* Make circles that indicate the steps of the form: */
.step {
 height: 15px;
 width: 15px;
 margin: 0 2px;
 background-color: #2ea3f2;
 border: none; 
 border-radius: 50%;
 display: inline-block;
 opacity: 0.5;
}

.step.active {
 opacity: 1;
}

/* Mark the steps that are finished and valid: */
.step.finish {
 background-color: #4CAF50;
}

hr {
width: 100%;
margin-left: auto;
margin-right: auto;
height: 3px;
background-color:#2ea3f2;
color:#2ea3f2;
}

<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<form id="regForm" action="insert.php" method="POST">
 <h1>Book for Appointment</h1>
 <div style="text-align:center;margin-top:40px;">
 <span class="step"></span>
 <span class="step"></span>
 <span class="step"></span>
 
 </div>
 <!-- One "tab" for each step in the form: -->
 <div class="tab"><h3>Appointment Details</h3>
 <hr>
 <p><strong>Reason</strong><input placeholder="Reason..." oninput="this.className = ''" name="reason"></p>
  <p><strong>Doctor</strong>
 <select name="doctor">
    <option value="Dr. Emma Blade">Dr. Emma Blade</option>
    <option value="Dr. John Watson">Dr. John Watson</option>
    <option value="Dr. Alexandra Smit">Dr. Alexandra Smith</option>
    
  </select>
 <br>
  <br>
 <label for="bday"><strong>Calendar</strong></label>
 <input type="date" id="date" name="bookingdate">
 
 </div>
 <div class="tab"><h3>Personal Information</h3>
 <hr>
 <p><strong>First Name</strong><input placeholder="First name..." oninput="this.className = ''" name="fname"></p>
 <p><strong>Last Name</strong><input placeholder="Last name..." oninput="this.className = ''" name="lname"></p>
 <p><strong>Gender</strong><input placeholder="Gender..." oninput="this.className = ''" name="gender"></p>
 <p><strong>Email</strong><input placeholder="E-mail..." oninput="this.className = ''" name="email"></p>
 <p><strong>Phone</strong><input placeholder="Phone..." oninput="this.className = ''" name="phone"></p>
 </div>
 <div class="tab"><h3>Confirm Appointment</h3>
 <hr>
<h3>Booking Details</h3>
<hr>
	<p><strong>Reason:</strong> <span id="reason">></span></p>
	
	<p><strong>Doctor:</strong> <span id="doctor"></span></p>
	<p><strong>Date: </strong><span id="bookingdate"></span>
</p>
<h3>Personal Information</h3>
<hr>

	<p><strong>First Name: </strong><span id="fname"></span></p>
<p><strong>Last Name: </strong><span id="lname"></span></p>
	<p><strong>Gender: </strong><span id="gender"></span></p>
	<p><strong>Email: </strong><span id="email"></span></p>
	<p><strong>Phone: </strong><span id="phone"></span></p>


 </div>
 <div style="overflow:auto;">
 <div style="float:right;">
 <button type="button" id="prevBtn" onclick="nextPrev(-1)">Previous</button>
 <button type="button" id="nextBtn" onclick="nextPrev(1)">Submit</button>
 </div>
 </div>
 <!-- Circles which indicates the steps of the form: -->

</form>