JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.css">
<div class="ui three top attached steps">
  <a class="moving active step" data-step="1">
    <div class="content">
      <div class="title">Form One</div>
    </div>
  </a>
  <a class="disabled moving step" data-step="2">
    <div class="content">
      <div class="title">Form Two</div>
    </div>
  </a>
</div>

<div class="ui attached segment">
  <div class="ui form" data-stage="1">
    <div class="field">
      <label>First Name</label>
      <input type="text" id="forename" name="forename" placeholder="First Name">
    </div>
    <div class="field">
      <label>Last Name</label>
      <input type="text" id="surname" name="surname" placeholder="Last Name">
    </div>
    <div class="ui four column grid">
      <div class="left floated column"></div>
      <div class="right floated column">
        <button class="disabled fluid positive ui button moving" data-step="2">Next</button>
      </div>
    </div>
  </div>
  <div class="ui form" data-stage="2" style="display:none;">
    <div class="field">
      <div class="ui checkbox">
        <input id="terms" name="terms" type="checkbox" tabindex="0" class="hidden">
        <label>I agree to the Terms and Conditions</label>
      </div>
    </div>
    <div class="ui four column grid">
      <div class="left floated column">
        <button class="fluid positive ui button moving" data-step="1">Back</button>
      </div>
      <div class="right floated column">
        <button class="disabled fluid positive ui button" id="submit">Submit</button>
      </div>
    </div>
  </div>

JavaScript

$(function() {
  var requireForValidation = [{
    element: "input#forename",
    valid: false
  }, {
    element: "input#surname",
    valid: false
  }];
  $(".moving").on("click", function() {
    var step = $(this).data("step");
    $(".form").each(function(k, v) {
      if ($(v).data("stage")) {
        if ($(v).data("stage") === step) {
          $(v).show();
        } else {
          $(v).hide();
        }
      }
    });
    $(".step").each(function(k, v) {
      if ($(v).data("step") === step) {
        $(v).addClass("active");
      } else {
        $(v).removeClass("active");
      }
    });
  });
  $(".form[data-stage=1]").form({
    "inline": true,
    "on": "blur",
    "fields": {
      "forename": {
        "identifier": "forename",
        "rules": [{
          "type": "empty",
          "prompt": "Please enter your first name"
        }]
      },
      "surname": {
        "identifier": "surname",
        "rules": [{
          "type": "empty",
          "prompt": "Please enter your last name"
        }]
      }
    },
    "onInvalid": function() {
      $(".moving[data-step=2]").addClass("disabled");
      var $that = $(this[0]);
      requireForValidation.forEach(function(r) {
        if ($that.is(r.element))
        {
      		r.valid = false;
        }
      });
    },
    "onValid": function() {
      var $that = $(this[0]);
      requireForValidation.forEach(function(r) {
        if ($that.is(r.element))
        {
      		r.valid = true;
        }
      });
      console.log(requireForValidation);
      
      var formIsValid = requireForValidation.reduce(function(a, b) {
      	//console.log(b);
        return a && b.valid;
      }, true);
      //console.log(formIsValid);
      if (formIsValid)
        $(".moving[data-step=2]").removeClass("disabled");
    }
  });
  $(".form[data-stage=2]").form({
    "inline": true,
    "on": "change",
    "fields": {
      "terms": {
        "identifier": "terms",
        "rules": [{
          "type":...