JSFiddle - React, Tailwind, and code Playground

by MrDahdoul

HTML

<div class="alert">Fill all fields</div>
<div class="information-panel">
  <div class="form-line">
    <div class="col-md-4">
      <label for="first_name">First Name</label>
      <input class="form-control" id="first_name" type="text" placeholder="First Name" required>
    </div>
    <div class="col-md-4">
      <label for="last_name">Last Name</label>
      <input class="form-control" id="last_name" type="text" placeholder="Last Name" required>
    </div>
    <div class="col-md-4">
      <label for="credit_card">Credit Card Number</label>
      <input class="form-control" id="credit_card" type="text" placeholder="Card Number" required>
    </div>
  </div>
</div>

<div id="step_nav">
  <button id="review" class="blue-button next">Review</button>
</div>


<div class="information-review-panel">
  <h2>Review Panel</h2>
  <h4>Please review your information below:</h4>
  <div class="amount">
    <h3>
       <b>Name:</b><span id="review-name"></span> 
    </h3>
    <h3>
       <b>Credit Card Number:</b><span id="review-card"></span> 
    </h3>
  </div>

  <div id="step_nav_rev">
    <button id="back" class="blue-button next">Back</button>
    <input type="submit" class="blue-button next" value="Submit">
  </div>
</div>

CSS

.information-review-panel,.alert {
  display: none;
}
.alert{
  color:red;
}

JavaScript

$(document).ready(function() {
  $("#review").click(function() {
    var first = $("#first_name").val();
    var last = $("#last_name").val();
    var card = $("#credit_card").val();
    if (first.trim() == '' || last.trim() == '' || card.trim() == '') {
      $(".alert").show();
    } else {
      $(".alert").hide();
      $(".information-panel").fadeOut();
      $(".information-review-panel").fadeIn();
      $(this).fadeOut();
      $("#review-name").text(first + " " + last);
      $("#review-card").text(card);
    }
  });

  $("#back").click(function() {
    $(".information-panel, #review").fadeIn();
    $(".information-review-panel").fadeOut();
  });
});