JSFiddle - React, Tailwind, and code Playground

by Sukanya Halder

HTML

<input type="text" data-index="0" id="inputMail0" class="signup-input text-value" name="email[0]" placeholder="e.g. [email protected]">
<input type="text" data-index="1" id="inputMail1" class="signup-input text-value" name="email[1]" placeholder="e.g. [email protected]">
<input type="text" data-index="2" id="inputMail1" class="signup-input text-value" name="email[2]" placeholder="e.g. [email protected]">
<input type="text" data-index="3" id="inputMail1" class="signup-input text-value" name="email[3]" placeholder="e.g. [email protected]">
<input type="text" data-index="4" id="inputMail1" class="signup-input text-value" name="email[4]" placeholder="e.g. [email protected]">
<input type="text" data-index="5" id="inputMail1" class="signup-input text-value" name="email[5]" placeholder="e.g. [email protected]">
<input type="text" data-index="6" id="inputMail1" class="signup-input text-value" name="email[6]" placeholder="e.g. [email protected]">
<button>Click</button>

CSS

.error {
    background-color:#ccc;
}

JavaScript

$(document).ready(function () {
    $("button").click(function (e) {
        e.preventDefault();
        $("input:text").removeClass("error");
        $("input:text").each(function () {
            var currentText = $(this).val();
            var mainElement = $(this);
            var allOtherEmail = $(this).nextAll("input:text");
            if (currentText.trim() != "") {
                allOtherEmail.each(function () {
                    if (currentText.trim() == $(this).val().trim()) {
                        mainElement.addClass("error");
                        $(this).addClass("error");
                        return false;
                    }
                });
                }
            });

        });
    });