JSFiddle - React, Tailwind, and code Playground

HTML

<form action="" class="registerForm" name="bookform">
        <h1 id="registrationTitle">
            Book Your Stay!
        </h1>
        <!-- Progress bar -->
        <div class="progressbar">
          <div class="progress" id="progress"></div>
          <div class="progress-step progress-step-active" data-title="Room"></div>
          <div class="progress-step" data-title="Contact"></div>
          <div class="progress-step" data-title="Extras"></div>
          <div class="progress-step" data-title="Confirm"></div>
        </div>

        <div class="form-step form-step-active">
          <div class="input-group">
            <select class="user_change destination-choice select" data-name="choiceDestination" id="result-destination" name="result-destination">
              <option value="Choose Destination" disabled selected hidden>Choose Destination</option>
              <option value="LasVegas">LasVegas</option>
              <option value="Seattle">Seattle</option>
            </select>
          </div>
          <div class="input-group">
            <select class="user_change room-choice select" data-name="choiceRoom" id="result-room" name="result-room">
              <option value="Choose Your Room" disabled selected hidden>Choose Your Room</option>
              <option value="Double Full Beds">Double Full Beds</option>
              <option value="Double Queen Beds">Double Queen Beds</option>
              <option value="Queen Bed">Queen Bed</option>
              <option value="King Bed">King Bed</option>
            </select>
          </div>
          <div class="input-group">
            <input type="date" class="user_change" data-name="choiceCheckin" id="result-checkin" />          
            <input type="date" class="user_change" data-name="choiceCheckout" id="result-checkout" />
          </div>
          <div class="">
            <a class="btn btn-next width-50 ml-auto" >Next</a>
          </div>
        </div>
        <div...

CSS

/* Progress Bar Start */
.progressbar {
  position: relative;
  display: flex;
  justify-content: space-around;
  counter-reset: step;
  margin: 0.5rem 0rem 0.5rem;
  width: 50%;
}

.progressbar::before,
.progress {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 20px;
  width: 100%;
  background-color: #dcdcdc;
  z-index: -1;
}

.progress {
  background-color: var(--primary-color);
  width: 0%;
  transition: 0.3s;
}

.progress-step {
  width: 2.5rem;
  height: 2.5rem;
  background-color: #dcdcdc;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.progress-step::before {
  counter-increment: step;
  content: counter(step);
}

.progress-step::after {
  content: attr(data-title);
  position: absolute;
  top: calc(100% + 0.5rem);
  font-size: 0.85rem;
  color: #666;
}

.progress-step-active {
  background-color: var(--highlight-yellow);
  color: #f3f3f3;
}
/* Progress Bar End */
/* Form Start */
.form-step {
  display: none;
  transform-origin: top;
  animation: animate .5s;
}
label {
  color: var(--wei);
}
.form-step-active {
  display: block;
}

.input-group {
  margin: 2rem 0;
}

@keyframes animate {
  from {
    transform: scale(1, 0);
    opacity: 0;
  }
  to {
    transform: scale(1, 1);
    opacity: 1;
  }
}
/* Form End */
.registerForm {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#registrationTitle {
  margin-top: 10px;
  font-size: var(--font-size-24);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--highlight-yellow);
  font-family: var(--font-family-ubuntu);
  font-weight: 400;
}
/* Buttons Start */
.btns-group {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}
.btn {
  font-size: var(--font-size-20);
  padding: 0.75rem;
  display: block;
  text-decoration: none;
  background-color: var(--background-grey);
  color: var(--background-blue);
  text-align: center;
 ...

JavaScript

// Your Code

const prevBtns = document.querySelectorAll(".btn-prev");
const nextBtns = document.querySelectorAll(".btn-next");
const progress = document.getElementById("progress");
const formSteps = document.querySelectorAll(".form-step");
const progressSteps = document.querySelectorAll(".progress-step");

let formStepsNum = 0;

nextBtns.forEach((btn) => {
  btn.addEventListener("click", () => {
    formStepsNum++;
    updateFormSteps();
    updateProgressbar();
  });
});

prevBtns.forEach((btn) => {
  btn.addEventListener("click", () => {
    formStepsNum--;
    updateFormSteps();
    updateProgressbar();
  });
});

function updateFormSteps() {
  formSteps.forEach((formStep) => {
    formStep.classList.contains("form-step-active") &&
      formStep.classList.remove("form-step-active");
  });

  formSteps[formStepsNum].classList.add("form-step-active");
}

function updateProgressbar() {
  progressSteps.forEach((progressStep, idx) => {
    if (idx < formStepsNum + 1) {
      progressStep.classList.add("progress-step-active");
    } else {
      progressStep.classList.remove("progress-step-active");
    }
  });

  const progressActive = document.querySelectorAll(".progress-step-active");

  progress.style.width =
    ((progressActive.length - 1) / (progressSteps.length - 1)) * 100 + "%";
}


// My Stuff

// Create an Empty Object
var the_data_obj = {};

// On change of input elements to update the object
$(".user_change").change(function(){
	var changed_field = $(this).attr("data-name");
  var changed_field_val = $(this).val();

   the_data_obj[changed_field] = changed_field_val;
  // Finally view the added stuff 
  $("#"+changed_field).text(changed_field_val);
  
  console.log(the_data_obj);
});