JSFiddle - React, Tailwind, and code Playground

HTML

<label for="username">Username1: </label>
<input type="text" id="username" />
<span id="validationTxt" style="display: none;">TEST</span>

JavaScript

var validUsernames = new Array("John", "Mark", "Kate", "Sarah");

$(document).ready(function() {

    $("#username").keyup(function() {
        for (i in validUsernames) {
           
            if($(this).val().length == 0) { 
                $("#validationTxt").css("display", "none"); 
                return false; 
            }
            if(validUsernames[i].toLowerCase() == $(this).val().toLowerCase()){
                $("#validationTxt").text("Username Already Taken");
                $("#validationTxt").css({'color' : 'red', 'display' : 'block'});
                exit();
            } else {
                $("#validationTxt").text("Username OK");
                $("#validationTxt").css({'color' : 'green', 'display' : 'block'});
            }
        }
    });

});