Tengo un formulario con html y css hecho pero este contiene muchos campos, por este motivo necesito hacer una paginación de tal manera que se muestren 10 preguntas por pantalla, el usuario cuando presione el botón "Siguiente" se deben mostrar las siguientes 10 preguntas y así sucesivamente. Aquí adjunto parte del código que llevo:
HTML:
<div id="page1">
<label for="">lorem ipsum</label>
<input type="text" name="" id="" class="form-input" placeholder="Algo random">
<label for="">lorem ipsum</label>
<input type="text" name="" id="" class="form-input" placeholder="Algo random">
<label for="">lorem ipsum</label>
<input type="text" name="" id="" class="form-input" placeholder="Algo random">
<label for="">lorem ipsum</label>
<input type="text" name="" id="" class="form-input" placeholder="Algo random">
<label for="">lorem ipsum</label>
<input type="text" name="" id="" class="form-input" placeholder="Algo random">
<label for="">lorem ipsum</label>
<input type="text" name="" id="" class="form-input" placeholder="Algo random">
<label for="">lorem ipsum</label>
<input type="text" name="" id="" class="form-input" placeholder="Algo random">
<input type="button" value="Siguiente">
</div>
<div id="page2">
<label for="">lorem ipsum</label>
<input type="text" name="" id="" class="form-input" placeholder="Algo random">
<label for="">lorem ipsum</label>
<input type="text" name="" id="" class="form-input" placeholder="Algo random">
<label for="">lorem ipsum</label>
<input type="text" name="" id="" class="form-input" placeholder="Algo random">
<label for="">lorem ipsum</label>
<input type="text" name="" id="" class="form-input" placeholder="Algo random">
<label for="">lorem ipsum</label>
<input type="text" name="" id="" class="form-input" placeholder="Algo random">
<label for="">lorem ipsum</label>
<input type="text" name="" id="" class="form-input" placeholder="Algo random">
<label for="">lorem ipsum</label>
<input type="text" name="" id="" class="form-input" placeholder="Algo random">
</div>
En la parte inferior del formulario se debe mostrar el número de página en que se encuentra, esto a la par del botón siguiente
JavaScript:
function showPages(id) {
let numberOfPages = 2;
for (let i = 0; i <= numberOfPages; i++){
if (document.getElementById('page'+i)) {
document.getElementById('page'+i).style.display='none';
}
}
if (document.getElementById('page'+id)) {
document.getElementById('page'+id).style.display='block';
}
};
Agradezco la ayuda que me puedan brinda, muchas gracias.