How To Create Multi Step Form?

HTML

<div id="container">
  <div id="progressbar">
    <span id="icon0" class="icon active">1</span>
    <span id="bar1" class="bar"></span>
    <span id="icon1" class="icon">2</span>
    <span id="bar2" class="bar"></span>
    <span id="icon2" class="icon">3</span></div>
  <form>
    <div id="loginInfo"class="individual">
      <h2>Account Details</h2>
      <input type="text"id="username"placeholder="User name.."/><br/><br/>
      <inputtype="password"id="pwd"placeholder="Password.."/><br/><br/>
      <button id="btnNext"class="next"data-num="1">Next</button>
    </div>
    <p class="loginError error"></p>
    <div id="personalInfo"class="individual">
      <h2>Personal Details</h2>
      <input type="text"id="firstName"placeholder="First name.."/><br/><br/>
      <input type="text"id="lastName"placeholder="Last name.."/><br/><br/>
      <button id="btnPrev"class="previous"data-num="1">Previous</button>
      <button id="btnNext1"class="next"data-num="2">Next</button>
    </div>
    <p class="personalError error"></p>
    <div id="contactInfo" class="individual">
      <h2>Contact Details</h2>
      <input type="email"id="mailId"placeholder="Email.."/><br/><br/>
      <input type="tel"id="phoneNum"placeholder="Phone number.."/><br/><br/>
      <button id="btnPrev1"class="previous"data-num="2">Previous</button>
      <button id="submitBtn">Submit</button>
    </div>
    <p class="contactError error"></p>
  </form>
</div>

CSS

#container{
  width:520px;
  border:2px solid #FF914D;
  margin:50px auto;
  padding:10px;
  background-color: #FFEADD;
}

#progressbar .icon{
  background:#FF914D;
  color:#fff;
  display: inline-block;
  padding:12px;
  border-radius: 50%;
}

#progressbar .bar{
  display: inline-block;
  width:200px;
  height:10px;
  background: #fff;
  border-radius: 20px;
}

form div{
  width:300px;
  margin:20px auto;
  padding:30px;
  border: 3px solid #fff;
  border-radius: 5px;
}

h2{
  font-size: 30px;
  color:#FF914D;
  font-weight: bold;
  margin:0px;
  margin-bottom:15px;
}

input, ::placeholder{
  font-size: 18px;
}

input[type=submit], button{
  width:100px;
  height:30px;
  font-size: 20px;
  border:1px solid #00C2CB;
  color:#FF914D;
  border-radius: 5px;
}

#personalInfo, #contactInfo{
  display: none;
}

#progressbar .active.icon, #progressbar .active.bar{
  background: #FF914D;
}

.error{
  font-size: 20px;
  color: red;
  width:300px;
  margin:0auto;
}

Javascript

let individual = document.querySelectorAll('.individual');

let username = document.getElementById('username');

let password = document.getElementById('pwd');

let loginError = document.querySelector('.loginError');

let firstName = document.getElementById('firstName');

let lastName = document.getElementById('lastName');

let personalError = document.querySelector('.personalError');

let mailId = document.getElementById('mailId');

let phoneNum = document.getElementById('phoneNum');

let contactError = document.querySelector('.contactError');

function display(count, num, btn) {
  let icon = document.querySelector(`#icon${num}`);
  let bar = document.querySelector(`#bar${num}`);
  for (let i = 0; i < individual.length; i++) {
    individual[i].style.display = "none";
  }
  individual[count].style.display = "block";
  if (btn == "next") {
    icon.classList.add("active");
    bar.classList.add("active");
  }
  if (btn == "prev") {
    icon.classList.remove('active');
    bar.classList.remove('active')
  }
}

let count = 0;

let nextClick = document.querySelectorAll('.next');

nextClick[0].addEventListener('click', function (e) {
  e.preventDefault();
  if (username.value && password.value) {
    loginError.innerHTML = "";
    let num = this.dataset.num
    display(++count, num, 'next');
  } else if (!username.value) {
    loginError.innerHTML = "Username needed";
  } else if (!password.value) {
      loginError.innerHTML = "Password needed";
  }
})

nextClick[1].addEventListener('click', function (e) {
  e.preventDefault();
  if (firstName.value && lastName.value) {
    personalError.innerHTML = "";
    let num = this.dataset.num
    display(++count, num, 'next');
  } else if (!firstName.value) {
      personalError.innerHTML = "First name is needed"
  } else if (!lastName.value) {
      personalError.innerHTML = "Last name is needed"
 }
})

let previousClick = document.querySelectorAll('.previous');

previousClick[0].addEventListener('click', function (e) {
  e.preventDefault();
  let num = this.dataset.num
  display(--count, num, 'prev');
})

previousClick[1].addEventListener('click', function (e) {
  e.preventDefault();
  let num = this.dataset.num
  display(--count, num, 'prev');
})

document.getElementById('submitBtn').addEventListener('click', function (e) {
  e.preventDefault();
  if (mailId.value && phoneNum.value) {
    contactError.innerHTML = "";
  } else if (!mailId.value) {
      contactError.innerHTML = "Email is needed"
  } else if (!phoneNum.value) {
      contactError.innerHTML = "Phone Number is needed"
  }
})