JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
    <form>
      <div id="step1" style="display: block;">
          <label for="first_nameo">Hidden Value Lable:: ==></label>
        <input type="hidden" name="first_nameo" id="FirstNameo" value="true">

          <br/>
          
        <label for="first_name">First Name</label>
        <input type="text" value="" name="first_name" id="FirstName"/>

        <label for="last_name">Last Name</label>
        <input type="text" value="" name="last_name" id="LastName"/>
      </div>

      
      <div id="step2" style="display: none;">
        <label for="first_name">Address</label>
        <input type="text" value="" name="address" id="Address"/> 
      </div>
    
      <a href="#" id="step1_btn">Continue to step 2</a>
      <a href="#" id="step2_btn" style="display:none;" >Back to step 1</a>
      <input type="submit" id="submit_btn" value="Verstuur" style="display: none;" />
    </form>

JavaScript

$(function() {
    $('form').validate({
       ignore: "",
       rules: {
           first_nameo: {
                required: true,
                equalTo: "#FirstName"
            },
           first_name: {
                required: true
           },
            last_name: "required",
            address: "required"
        }
    });

    $('#step1_btn').click(function() {
        if ($('form').valid()) {
            $('#step1, #step1_btn').hide();
            $('#step2, #submit_btn').show();
            $('#step2_btn').show();
        }
    });

    $('#step2_btn').click(function() {
        $(this).hide();
        $('#step1, #step1_btn').show();
        $('#step2, #submit_btn').hide();
    });

    $('#submit_btn').click(function() {
        if ($('form').valid()) {
            return true
        }
    });
});