JSFiddle - React, Tailwind, and code Playground

HTML

<span class="clearable">
    <input id="data_field" class="data_field" type="text" name="data_field" value="" />
    <span id="data_field_clear" class="icon_clear">x</span>
</span>

CSS

.clearable{
    position:relative;
}
.data_field{
    padding-right:17px; /* add space for the 'x' icon*/
}
span.icon_clear{
    position:absolute;
    right:10px;

    /* now go with the styling */
    cursor:pointer;
    font: bold 1em sans-serif;
    color:#38468F;  
}
span.icon_clear:hover{
    color:#f52;
}

JavaScript

$(document).ready(function() {
    var clearTextTimeout;
    
    $("#data_field").on("blur", function () {
        var $that = $(this);
        clearTextTimeout = setTimeout(function () {
            console.log("would be error checking and formatting text");            
        }, 100);
    });
    
    $("#data_field_clear").on("click", function () {
        clearTimeout(clearTextTimeout);
        console.log("clearing text");
        $("#data_field").val("");
    });
});