JSFiddle - React, Tailwind, and code Playground

HTML

<div id="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) {
                    if (firstTwoUpper == "HX") {
                        $("#message").empty();
                        $("#message").html('<p>some message</p><a href="http://www.google.com">Google</a>');
                    } else if (firstTwoUpper == "HD") {

                        $("#message").empty();
                        $("#message").html('<p>other message</p><a           href="http://www.stackoverflow.com">Stack OverFlow</a>');
                    }
                    $("#fail").hide();
                    $("#message:hidden").fadeIn();
                } else {
                    $("#message").hide();
                    $("#fail:hidden").fadeIn();
                }
            } else {
                $("#message").hide();
                $("#fail").hide();
            }
        });