JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tbody>
        <tr>
            <td><input type="text" class="filter-input" /><span class="filter-clear hidden" /></td>
        </tr>
        <tr>
            <td><input type="text" class="filter-input" /><span class="filter-clear hidden" /></td>
        </tr>
        <tr>
            <td><input type="text" /></td>
        </tr>
    </tbody>
</table>

CSS

.filter-clear{
    position: relative;
    left: -15px;
}
.filter-clear:after{
    content: "X";
}
.filter-clear:hover{
    color: blue;
    cursor: pointer;
}
.hidden{
    display: none;
}

JavaScript

$(".filter-input").keyup(function () {
    if ($(this).val().length) {
        $(this).siblings(".filter-clear").removeClass("hidden");
    } else {
        $(this).siblings(".filter-clear").addClass("hidden");
    }
});

$(".filter-clear").click(function (){
	$(this).siblings(".filter-input").val("");
    $(this).addClass("hidden");
});