JSFiddle - React, Tailwind, and code Playground

HTML

//make this appear in colorbox
    <div class="zipCode">
    <form>
    <input id="zipCode" name="zipCode" />
    <input type="submit" value="Submit">
    </form>
    </div>
        <div style="display:none" id="cart">YEY!!</div>

JavaScript

var zipCodeArray = ["98001","98002", "98003", "98004", "98005", "98006"];
 //Get user cookie match zip and 5 digits only.
 var userZip = document.cookie.match(/zip=(\d{5})/) || false;
 $("#zipCode").on('blur', function(){
     console.log("Blur");
 //If userZip is defined use userZip
   var zipCode = userZip ? userZip[1] : $(this).val();
     console.log(zipCode);
 //No need to check for input length
     if($.inArray(zipCode, zipCodeArray) > -1){
         console.log('in array');
      //display the hidden elements if zip is in list 
      $("#cart").css("display:block");
      if(!userZip){
      document.cookie = "zip="+zipCode;
          console.log("cookie "+document.cookie);
      }
     }else{
       alert("We only service this area...but you can add to wish list");
       $("#button-cart","#or").css("display:none");
       //hide add to cart and the "- OR -" text.
     } 
});