bu soruyu sizin cevaplamanız gerekiyor, yukarıda da yazdığım gibi dinamiklik istiyorsanız içeriğinizi yönetmek ve buna göre veritabanı vs. kullanmak istiyorsanız bir yazılım dili kullanmak durumundasınız her türlü.
farklı olarak şunu söyleyebilirim, client-side ve server-side işlemlerini ayırabilirsiniz.
yani nodejs ile bir rest api hazırlarsınız, geri kalan tüm işlemlerinizi javascript ile hazırladığınız endpointlere istek atarak nodejs'i karıştırmadan yapabilirsiniz.

kodlarını yazsaydın daha doğru yönlendirme yapabilirdik :) aşağıda çalışan bir kod var alıp kendine göre uyarlayabilirsin

<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

<div class="my-slider">
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">Slide 1</div>
            <div class="swiper-slide">Slide 2</div>
            <div class="swiper-slide">Slide 3</div>
        </div>
    </div>
    <button class="prev-btn">Önceki</button>
    <button class="next-btn">İleri</button>
</div>

<script>
    var swiper = new Swiper('.my-slider .swiper-container', {
      navigation: {
        nextEl: '.my-slider .next-btn',
        prevEl: '.my-slider .prev-btn',
      }
    });
</script>

siteye ilk girişte her bir bölüm için cookie kontrolü yapıyorum. örneğin;

if (!isset($_COOKIE['kesfet'])){
    setcookie('kesfet', date('Y-m-d H:i:s'), time() + (60 * 60 * 24 * 30));
}
if (!isset($_COOKIE['sorucevap'])){
    // oluştur
}

daha sonra soldaki alanda bu cookienin tarihinden sonra eklenmiş içerik var mı ona bakıyorum, bir sonraki girişinde örneğin 2 gün sonra girmiş olsun cookie zaten oluştuğu için 2 gün içerisinde kaç yeni içerik varsa onu gösteriyorum.

ilgili alana girdiğinde de örneğin keşfet'e tıkladı, artık onun cookie'sini güncel tarih neyse onunla değiştiriyorum böylece son gördüğü tarih o tarihe eşitleniyor ve yeni içerik olmadığı için bir şey gösterilmiyor.

verdiğin kodlarda sadece boş olup olmadığını kontrol ettiği için dolayısı ile geçerli bir mail ya da senin belirlediğin bir format olup olmadığına bakmıyor.
şu for bloğuna kendin koşullarını tek tek ekleyebilirsin

for (i = 0; i < y.length; i++) {
    // boş mu kontrol et
    if (y[i].value == "") {
      y[i].className += " invalid";
      valid = false;
    }
    
    // email mi kontrol et
    // diğer vs. aynı mantık
}

senin için jquery ile bir örnek hazırladım. bu sefer böyle kontrol etmek yerine, input'ların tipine göre kontrol işlemi yapıyor. Şöyle bir html'in olsun

<form action="" method="get">
	<div class="tab">
		<input type="text" placeholder="name" required> <br>
		<input type="text" placeholder="surname" required>
	</div>
	<div class="tab">
		<input type="email" placeholder="email" required> <br>
		<input type="phone" placeholder="phone" required> <br>
		<select name="job" required>
			<option value="">Seçin</option>
			<option value="1">Seçenek 1</option>
			<option value="2">Seçenek 2</option>
		</select>
	</div>
	<div class="tab">
		<input type="password" placeholder="password" required> <br>
		<input type="password" placeholder="password again">
	</div>
</form>
<button type="button" disabled class="prev">Önceki</button>
<button type="button" class="next" data-text="Sonraki" data-submit="Gönder">Sonraki</button>

ufakta bir css olacak

[disabled] {
	opacity: .4;
}
.error {
	border: 1px solid red;
}

ve js kodlarınsa şöyle

let tabs = $('.tab');
tabs.filter(':not(:first)').hide();

let next = $('.next');
let prev = $('.prev');

tabs.find('input, textarea, select').on('keyup input', function(e){
	$(this).removeClass('error');
});

prev.on('click', function(e){
	e.preventDefault();
	let tabIndex = $('.tab:visible').index();
	if (tabIndex > 0){
		$('.tab:visible').hide().prev('.tab').show();
		next.text(next.data('next'));
	}
	if ($('.tab:visible').index() == 0){
		prev.attr('disabled', 'disabled');
	}
});

next.on('click', function(e){
	e.preventDefault();
	
	let elems = $('.tab:visible input, .tab:visible textarea, .tab:visible select');
	let errors = false;
	elems.each(function(){
		if ($(this).is(':invalid')){
			errors = true;
			$(this).addClass('error');
		}
	});
	
	if (!errors){
		let nextTab = $('.tab:visible').next();
		if (nextTab.length == 0) {
			$('.tab').closest('form').submit(); // formu gönder
		} else {
			$('.tab:visible').hide();
			nextTab.show();
			nextTab.find('*:first').focus();
			if (nextTab.length > 0){
				prev.removeAttr('disabled');
			}
			if ($('.tab:visible').index() + 1 == $('.tab').length){
				next.text(next.data('submit'));
			} else {
				next.text(next.data('next'));
			}
		}
	} else {
		$('.tab:visible .error:first').focus();
	}
	
});

artık html'de required niteliğin varsa bu alan doldurulması zorunlu alandır. Ayrıca tipi email ise örneğin geçerli bir e-mail formatı olmadığı sürece geçersiz sayılır, tipi number ise sayı olmadığı sürece geçersiz sayılır.
Ya da html form etiketlerinde pattern diye bir nitelik var buraya kendi regex kodlarını yazabiliyorsun. Örneğin;

<input type="text" name="tc" placeholder="tc no" required pattern="[0-9]{11}">

bunu formun içine koyup test edersen 11 haneli sayı yazmadığın sürece geçersiz olacak ve sonraki adıma geçirmeyecektir.

demosu için: https://codepen.io/tayfunerbilen/pen/mdOGMEr