JSFiddle - React, Tailwind, and code Playground

HTML

<div id="message">some message</div>
<div id="fail">fail message</div>

<input type="text" id="myInput" />

JavaScript

$("#message").hide();
        $("#fail").hide();
    
        var prefix = ['HX', 'HD', 'BD', 'LS']
    
        $('#myInput').keyup(function(e) {
            var value = $(this).val();
            var firstTwo = value.substr(0,2);
            var firstTwoUpper = firstTwo.toUpperCase();
         
            if(firstTwo != firstTwoUpper) {
                $(this).val( value.replace(/^\w\w/, firstTwoUpper) );
            }
            if(value.length > 1) {
                if($.inArray(firstTwoUpper, prefix) >= 0) {
                    $("#fail").hide();
                    $("#message:hidden").fadeIn();
                } else {
                    $("#message").hide();
                    $("#fail:hidden").fadeIn();
                }
            } else {
                $("#message").hide();
                $("#fail").hide();
            }
        });