JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/ui-lightness/jquery-ui.css">
<form id="camperapplicationForm"method="post" action=""> 
<div id="first-step">
<h2>First Step</h2>
<br>
<h3>Welcome to our form</h3>
<br>
</div>
 
<div id="second-step">
<h2>Second Step</h2><br>
<h3>Select the capacity</h3><br>
<input type="text" id="amount" style="border:0; color:#000; font: 16px Georgia, 'Times New Roman', Times, serif; padding-bottom: 10px;" readonly="readonly"/>
<div id="slider-range"></div>
<br>    
</div><!-- end second-step -->
 
<div id="third-step">
<h2>Third Step</h2><br>
<h3>Please select the date</h3><br>
<p>Date: <input type="text" id="datepicker" readonly="readonly"></p><br>  
</div><!-- end third-step -->
    
<div id="fourth-step">
<h2>Fourth Step</h2><br>
<h3>Please select the grade</h3><br>
<input type="text" id="amount2" style="border:0;color:#000; font: 16px Georgia, 'Times New Roman', Times, serif; padding-bottom: 10px;" readonly="readonly"/>
<div id="slider"></div><br>
</div> <!-- end fourth-step -->
    
<div id="final-step">
<h2>Final Step</h2><br>
<h3>Show all the collected details here</h3><br>
Capacity:<br>Date:<br>Grade:<br><br>
</div> <!-- end fourth-step -->
</form>

CSS

h2 {
font: 28px Georgia, 'Times New Roman',Times, serif;
}

h3 {
font: 20px Georgia, 'Times New Roman',Times, serif;
}

JavaScript

// step by step process
var prevLink = '<a class="prev" href="#">< < Prev</a> ';
var nextLink = '</a><a class="next" href="#">Next >></a>';
var navHTML = '<div class="prev-next">' + prevLink + nextLink + '</div>';
$(function() {
    // init
    $('#camperapplicationForm > div').hide().append(navHTML);
    $('#first-step .prev').remove();
    $('#last-step .next').remove();

    // show first step
    $('#first-step').show();

    $('a.next').click(function() {
        var whichStep = $(this).parent().parent().attr('id');

        if (whichStep == 'first-step') {

            // validate first-step
             $(this).parent().parent().hide(300).next().show(300);
        }
        else if (whichStep == 'second-step') {

            // validate second-step
             $(this).parent().parent().hide(300).next().show(300);
        }
        else if (whichStep == 'third-step') {

            if (!$('#datepicker').val()){
alert('no date!');                
            }else{
             $(this).parent().parent().hide(300).next().show(300);
            }
        }
        else if (whichStep == 'fourth-step') {

            // validate fourth-step
             $(this).parent().parent().hide(300).next().show(300);
        }
        else if (whichStep == 'last-step') {

            // validate last-step
        }
    });

    $('a.prev').click(function() {
        $(this).parent().parent().hide(300).prev().show(300);
    });
});

// slider
$(function() {
    $("#slider-range").slider({
        range: true,
        min: 0,
        max: 1000,
        step : 10,
        values : [ 50, 1000 ],
        slide: function(event, ui) {
            $("#amount").val(ui.values[0] + "-" + ui.values[1] + " people");
        }
    });
    $("#amount").val("" + $("#slider-range").slider("values", 0) + "-" + $("#slider-range").slider("values", 1) + " people");
});

$(function() {
    $( "#slider" ).slider({
    min: 1,
    max: 5,
    step: 1,
    slide: function( event, ui ) {
    $(...