JSFiddle - React, Tailwind, and code Playground

HTML

<div class="formLine form-email">
  <div class="left">
	  Email <span class="red">*</span>
	</div>
								
	<div class="right">
	  <input class="formText mustNotEmpty email-field" type="email" placeholder="Contoh: [email protected]" id="emailValidation" required/>
    <div class="errorMessage">
      <i class="fa fa-times-circle"></i> Email tidak valid
    </div>
	<!-- tutup right -->
  </div>								
		<div class="clear"></div>
</div>
							
<div class="formLine form-order">
  <div class="left">
    Order ID <span class="red">*</span>
  </div>
								
  <div class="right">
    <input class="formText inputNumber mustNotEmpty order-field" type="text" placeholder="Contoh: 24334242" required/>
		  <div class="errorMessage">
        <i class="fa fa-times-circle"></i> Data ini dibutuhkan
      </div>
	<!-- tutup right -->
  </div>								
  <div class="clear"></div>
</div>
							
<div class="formLine">
  <a class="formButton button-cek" id="submit"> CEK PESANAN </a>
</div>

JavaScript

//Email Regex
function isEmailValid(emailAddress) {
    var pattern = /^([a-z\d!#$%&'*+\-\/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+(\.[a-z\d!#$%&'*+\-\/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+)*|"((([ \t]*\r\n)?[ \t]+)?([\x01-\x08\x0b\x0c\x0e-\x1f\x7f\x21\x23-\x5b\x5d-\x7e\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|\\[\x01-\x09\x0b\x0c\x0d-\x7f\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))*(([ \t]*\r\n)?[ \t]+)?")@(([a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.)+([a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.?$/i;
    return pattern.test(emailAddress);
};
			
//Order Regex
function orderNumberVal(orderNumber){
  var pattern = /^[0-9]{4,8}$/;
  return pattern.test(orderNumber);
}

$(function() {
	$('#submit').click(submitEmail);
});

//Form Validation Content
function submitEmail(e) {
  e.preventDefault();
  
  $(".mustNotEmpty").each(function() {
    if (!$(this).val()) {
      $(this).closest(".formLine").addClass("errorForm");
    } else {
      $(this).closest(".formLine").removeClass("errorForm");
    }
				
    if ($(this).closest(".formLine").is(".form-email")) {
      var namaEmail = $(".email-field").val();

      if (namaEmail && isEmailValid(namaEmail)){
        $(".form-email").removeClass("errorForm");
        $(".formLine .formButton.button-cek").attr("href", "cek-perjalanan-sekali.html");
      }
      else if (!namaEmail) {
        $(".form-email").addClass("errorForm");
      }
      else{
        $(".form-email").addClass("errorForm");
      }
    }

    //kondisi yg dibawah ini gak kebaca we
    if ($(this).closest(".formLine").is(".form-order")) {
      var orderNumber = $(".inputNumber.order-field").val();

      if(orderNumber &&...