JSFiddle - React, Tailwind, and code Playground

HTML

<div id="ReceiptInput_Field_Error" style="z-index:1; position:absolute; top:270px; left:650px; display: none; font-size:35px; font-family:'Gothic'; width:1080; color:#fff;"><font face="Gothic">* Please fill in appropriate fields.</font></div>

<form>

  <!-- DropDown Menu to choose Participating Outlet -->
  <select id="dropDownShops_1">
    <option value="" selected disabled>Please Select Shops ...</option>
  </select>

  <input type="text" id="ReceiptField_1" style="z-index=10; position:absolute; top:390px; left:858px; height:58px; width:265px; outline:0; border: 0; font-size:25px; font-family:'Gothic'; color:#765725; background: transparent;" autofocus>

  <select id="dropDownShops_2">
    <option value="" selected disabled>Please Select Shops ...</option>
  </select>

  <input type="text" id="ReceiptField_2" style="z-index=10; position:absolute; top:585px; left:858px; height:58px; width:265px; outline:0; border: 0; font-size:25px; font-family:'Gothic'; color:#765725;  background: transparent;">

  <input type="checkbox" id="AmaxCardField" style="z-index=10; position:absolute; top:690px; left:420px; height:30px; width:30px; outline=0; border: 0; background: transparent;">
</form>

JavaScript

//Check for Input Field

if (($.trim($("#dropDownShops_1").val()) == "" || $.trim($("#ReceiptField_1").val()) == "") && ($.trim($("#dropDownShops_2").val()) == "" || $.trim($("#ReceiptField_2").val()) == "")) {

  console.log("Receipt_Field_Error wrong");
  $("#ReceiptInput_Field_Error").html("* Please fill in appropriate fields.");
  $("#ReceiptInput_Field_Error").fadeIn();

  setTimeout(function() {
    $("#ReceiptInput_Field_Error").fadeOut();
  }, 5000);

} else {

  //Check if American Card is used: Min spending of SGD$120 else will be min spending of SGD$150

  //AmexCard User
  if ($('#AmaxCardField').is(':checked')) {

    //Check that the input value field is SGD$120 or more else, inform that minimum spending is SGD120
    if (($("#ReceiptField_1").val() >= '120') || ($("#ReceiptField_2").val() >= '120') || [
        [($("#ReceiptField_1").val()) + ($("#ReceiptField_2").val())] >= '120'
      ]) {

      //Condition Passed
      console.log("Amex user and spent more than $120");

      alert("Amex user and spent more than $120");
    } else {
      //inform that minimum spending is SGD120

      $("#ReceiptInput_Field_Error").html("* Your Minimum Spending should be $120 to qualify.");
      $("#ReceiptInput_Field_Error").fadeIn();

      setTimeout(function() {
        $("#ReceiptInput_Field_Error").fadeOut();
      }, 5000);
    }

  } else if ((!$('#AmaxCardField:checked').length)) {

    //Check that the input value field is SGD$150 or more else, inform that minimum spending is SGD150
    if (($("#ReceiptField_1").val() >= '150') || ($("#ReceiptField_2").val() >= '150') || [
        [($("#ReceiptField_1").val()) + ($("#ReceiptField_2").val())] >= '150'
      ]) {


      console.log("Amex user and spent more than $150");

      alert("Amex user and spent more than $150");
    } else {
      //inform that minimum spending is SGD120

      $("#ReceiptInput_Field_Error").html("* Your Minimum Spending should be $150 to qualify.");
     ...