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>
<div id="errorMessage"></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">
<div id="errorMessage2"></div>
</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="last-step">
<h2>Last Step</h2><br>
<h3>Thank you! </h3><br>
    <div id="mdata"></div><br>
    <input type="submit" value="Submit"/><br>
    <br>        
</div> <!-- end last-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>';
var FormData = [];
$(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
        }
        else if (whichStep == 'second-step') {

            // validate second-step
            var lower = $("#slider-range").slider("values", 0);
            var upper = $("#slider-range").slider("values", 1);
            if (lower == 0 && upper == 0) {
                $("#errorMessage").html('Please select two values other than 0 and 0!');
                return false;
            }

            if (lower == 1000 && upper == 1000) {
                $("#errorMessage").html('Please select two values other than 1000 and 1000!');
                return false;
            } else {
                $("#errorMessage").html("");
            }

            FormData[0] = $('#amount').val();
        }
        else if (whichStep == 'third-step') {

            // validate third-step
            FormData[1] = $('#datepicker').val();
            if (!$('#datepicker').val()) {
                $("#errorMessage2").html('Please select a date!');
                return false;
            } else {
                $("#errorMessage2").html("");
            }
        }
        else if (whichStep == 'fourth-step') {
            // validate fourth-step
            FormData[2] = $('#amount2').val();
            //Finally...
            $('#mdata').html('Capacity: ' + FormData[0] + '<br>Booking Date: ' + FormData[1] + '<br>Grade: ' + FormData[2]);

            var...