JSFiddle - React, Tailwind, and code Playground

HTML

<div id="b1" class="blockQuest-1">
				<p class="quest">1) 2+2=</p>
				<input id="q1" type="radio" name="q1" value="1" />5<br />
				<input id="q1" type="radio" name="q1" value="2" />4<br />
				<input id="q1" type="radio" name="q1" value="3" />3<br />
				<button id="next-1">Следующий</button>
			</div>

			<div class="blockQuest-2">
				<p class="quest">2) 2*2=</p>

				<input type="checkbox" name="q2" value="1" />2<br />
				<input type="checkbox" name="q2" value="2" />4<br />
				<input type="checkbox" name="q2" value="3" />8/2<br />
				<button id="next-2">Следующий</button>


			</div>
	
		
		
			<div class ="blockQuest-3">
				<p class="quest">3) Столица Франции?</p>

				<select name="q3" id="q3">
					<option value="1">Берлин</option>
					<option value="2">Марсель</option>
					<option value="3">Париж</option>
					<option value="4">Казань)</option>
				</select>
			<button id="next-3">Следующий</button>
			</div>


			<div class="blockQuest-4">
				<p class="quest">4) Имя Ленина</p>
				<input type="text" name="q4" />
				<button id="next-4">Следующий</button>
			</div>

			<div class="blockQuest-5">
				<p class="quest">5) Фамилия Ленина</p>
				<input type="text" name="q5" />
				<button id="next-5">Следующий</button>
			</div>

CSS

body{
	background-color:#d9ffd6;
}
p {
	text-align: center;
 font-size:24px;
}
/*input {

 font-size:24px;
}*/
/*button{
	margin-left: 380px;
	text-align: center;
	width: 100px;
	height: 36px;
}*/
/*#ball{
	font-size: 36px;
}*/
form{
	display: flex;
	flex-direction: row;
}
.box{
	width: 50%;
}
.quest{
	text-align: left;
}
.box_2{
	margin-top: 50px;
}
#blok{
display: none;
}
#btStart{
	font-size: 23px;
border-radius: 10px;
	margin-top: 25%;
	margin-left: 45%;
	width: 150px;
	height: 54px;
}
#q1{
	font-size: 15px;
}
.blockQuest-5{
	display: none;
	position: absolute;
	z-index: 6;
}
.blockQuest-4{
	display: none;
	position: absolute;
	z-index: 7;
}
.blockQuest-3{
	display: none;
	position: absolute;
	z-index: 8;
}
.blockQuest-3-after{
	display: block;
	position: absolute;
	z-index: 8;
}
.blockQuest-2{
	display: none;
	position: absolute;
	z-index: 9;
}
.blockQuest-2-after{
	display: block;
	position: absolute;
	z-index: 10;
}
.blockQuest-1{
	display: block;
	position: absolute;
	z-index: 10;
}
.blockQuest-1-after{
	display: none;
	position: absolute;
	z-index: -100;
}
.display-none{
	display: none;
}
.display-block{
	display: block;
}

JavaScript

$('#next-1').click(function() {  
    // $('.blockQuest-1').not(this).removeClass('display-block');
    $('.blockQuest-1').toggleClass('blockQuest-1-after');
    $('.blockQuest-2').addClass('blockQuest-2-after');
});
$('#next-2').click(function() {  
    // $('.blockQuest-1').not(this).removeClass('display-block');
    $('.blockQuest-2-after').addleClass('blockQuest-2');
    $('.blockQuest-3').addClass('blockQuest-3-after');
});