JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js"></script>
<div class="form-group">
    <label for="exampleInputEmail1">User Name</label>
    <input type="text" maxlength="255" class="form-control" id="user_name2" placeholder="" required>
    <input type="hidden" id="u_name" value="' . $res[0]->u_name . '">
</div>

JavaScript

$('#user_name2').on("change",function(){
     alert("hi");
    //$(".help-block1").hide();
    var user_name = $("#user_name2").val();
    var name = $("#u_name").val();
    //var hidd = $("#hidd").val();
    var baseurl = $("#site_url").val();
    alert(user_name);
    alert(name);

    if (user_name == '') {
        $("#user_name2").after('<p class="help-block1"><b style="color:red;">Enter a username first</b></p>');
    }
    else if (user_name == name) {
        $("#user_name2").after('<p class="help-block1"><b style="color:red;">This is current username</b></p>');
    }
    else {
alert("called");
        $.ajax({
            url: "" + baseurl + "user/check_user",
            async: false,
            type: "POST",
            dataType: "json",
            cache: false,
            data: {
                    user_name: user_name
            },
            success: function(response) {
                if (response.res_user == 'exist') {

                    $("#user_name2").after('<p class="help-block1"><b style="color:red;">Username alredy exist</b></p>');
                    $("#user_name2").focus();
                    $("#hidd").val('fail');
                }
                else if (response.res_user == 'available') {
                   $("#user_name2").after('<p class="help-block1"><b style="color:' + response.status + ';">Username available</b></p>');
                }
                else {
                    $("#user_name2").after('<p class="help-block1"><b style="color:red;">Error. Try again</b></p>');
                }
            }
        });
        //return false;
    }
});