JSFiddle - React, Tailwind, and code Playground

by pierian_design

HTML

<form id="regForm">
  <h1>Форма:</h1>
  <!-- One "tab" for each step in the form: -->
  <div class="tab">В основную таблицу
    <p><input id="firstName" placeholder="First name..."></p>
    <p><input id="lastName" placeholder="Last name..."></p>
  </div>
  <div class="tab">В основную таблицу
    <p><input id="email" placeholder="E-mail..."></p>
    <p><input id="phone" placeholder="Phone..."></p>
  </div>
  <div class="tab">Дополнительно
    <p><input id="add1" placeholder="dd"></p>
    <p><input id="add2" placeholder="mm"></p>
  </div>
  <div class="tab">Результат
		<p></p>
		<table id="registration-result">
			<thead>
				<tr>
					<th>Имя</th>
					<th>Фамилия</th>
					<th>Еmail</th>
					<th>Телефон</th>
					<th>Инфо</th>
				</tr>                
			</thead>
			<!-- сюда добавим строку с нашими данными с ссылкой на дополнительные -->
        
			<tbody>       
			</tbody>
    </table>	
		<div id="info"></div>
  </div>
  <div style="overflow:auto;">
    <div style="float:right;">
      <button type="button" id="prevBtn">Previous</button>
      <button type="button" id="nextBtn">Next</button>
    </div>
  </div>
</form>

CSS

* {
  box-sizing: border-box;
}

body {
  background-color: #f1f1f1;
}

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

h1 {
  text-align: center;  
}

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

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

button {
  background-color: #4CAF50;
  color: #ffffff;
  border: none;
  padding: 10px 20px;
  font-size: 17px;
  font-family: Raleway;
  cursor: pointer;
}

button:hover {
  opacity: 0.8;
}

#prevBtn {
  background-color: #bbbbbb;
}

.tab table {
  width: 100%;
  padding:5px;
  text-align: left;
  border:1px solid #d3d3d3;
  border-collapse:collapse;
}

.tab th {
  padding: 4px 10px;
  font-size: 12px;
  font-weight: normal;   
  border:1px solid #d3d3d3;
}

.tab td {
  border:1px solid #d3d3d3;
  padding:5px;
}

JavaScript

var currentTab = 0;
showTab(currentTab);

function showTab(n) {
  var x = document.getElementsByClassName("tab");
  x[n].style.display = "block";
  if (n == 0) {
    document.getElementById("prevBtn").style.display = "none";
  } else {
    document.getElementById("prevBtn").style.display = "inline";
  }
  if (n == (x.length - 1)) {
    document.getElementById("nextBtn").innerHTML = "Submit";
  } else {
    document.getElementById("nextBtn").innerHTML = "Next";
  }
}

function nextPrev(n) {
  var x = document.getElementsByClassName("tab");
  x[currentTab].style.display = "none";
  currentTab = currentTab + n;
  if (currentTab >= x.length) {
    document.getElementById("regForm").submit();
    return false;
  }
  showTab(currentTab);
	if (currentTab === 3) {
		createTable();	
		createHuddenDiv();
	}
}

document.getElementById('prevBtn').addEventListener("click", function (e) {
  nextPrev(-1);
});

document.getElementById('nextBtn').addEventListener("click", function (e) {
  nextPrev(1);
});

//формирование результата
function createTable() {
	// создаём массив данных для таблицы
	var firstName = document.getElementById('firstName').value;
	var lastName = document.getElementById('lastName').value;
	var email = document.getElementById('email').value;
	var phone = document.getElementById('phone').value;
	var tableArr = [firstName, lastName, email, phone];
	
	var table = document.getElementById('registration-result');
	tbody = table.querySelectorAll('tbody')[0];
	var tr = document.createElement("tr");

	for (n = 0; n < tableArr.length; n++) {
		tr.innerHTML += '<td>' + tableArr[n] + '</td>';  
	}

	tr.innerHTML += '<td><a href="#" class="show-popup" data-href="info">Доп. инфо</a></td>';
	tbody.appendChild(tr);
	return;
}
	
// скрытый див со списком дополнительных данных
function createHuddenDiv() {

	var add1 = document.getElementById('add1').value;
	var add2 = document.getElementById('add2').value;
	var hiddenArr = [add1, add2];

	var hiddenDiv =...