JSFiddle - React, Tailwind, and code Playground

HTML

<form action="" id="SignupForm">
    <input type="text" id="email1">
    <input type="text" id="email2">
    <input type="text" id="firstname">
    <input type="text" id="surname">
        <button type="submit">Send</button>
</form>
        
<div id="firstname_valid_prompt"></div>
<div id="firstname_correct_image"></div>
<div id="surname_valid_prompt"></div>
<div id="surname_correct_image"></div>
<div id="email1_valid_prompt"></div>
<div id="email1_correct_image"></div>
<div id="email2_valid_prompt"></div>
<div id="email2_correct_image"></div>

JavaScript

var form = $("#SignupForm");
var email1 = $("#email1");
var email2 = $("#email2");
var firstname = $("#firstname");
var surname = $("#surname");


var firstname_valid_prompt = $("#firstname_valid_prompt");
var firstname_correct_image = $("#firstname_correct_image");
var surname_valid_prompt = $("#surname_valid_prompt");
var surname_correct_image = $("#surname_correct_image");
var email1_valid_prompt = $("#email1_valid_prompt");
var email1_correct_image = $("#email1_correct_image");
var email2_valid_prompt = $("#email2_valid_prompt");
var email2_correct_image = $("#email2_correct_image");



var lettersReg = /^([a-zA-Z,-]|\s)*$/;
var emailReg = /^(\S+@\S+(\.\S+)*\.(\S{2,4}))?$/i;



email1.keyup(validateEmail1);
email2.keyup(validateEmail2);
firstname.keyup(validateFirstname);
surname.keyup(validateSurname);




form.submit(function() {
    if (validateEmail1() && validateEmail2() && validateFirstname() && validateSurname()) {
        return true;
    } else {
        return false;
    }

});

function validateEmail1() {
    if (email1.val().length == 0) {
        email1.addClass("error");
        email1_valid_prompt.removeClass("correct");
        email1_valid_prompt.text("You Must Enter Your E-mail Address");
        email1_correct_image.removeClass("correct");
        email1_valid_prompt.addClass("error");
        return false;
    } else {
        if (!emailReg.test(email1.val())) {
            email1.addClass("error");
            email1_valid_prompt.removeClass("correct");
            email1_valid_prompt.text("Please Enter a Valid E-mail Address");
            email1_correct_image.removeClass("correct");
            email1_valid_prompt.addClass("error");
            return false;
        } else {
            email1.removeClass("error");
            email1_valid_prompt.text("");
            email1_correct_image.addClass("correct");
            email1_valid_prompt.removeClass("error");
            return true;
        }
    }
} // Email Function End

function...