JSFiddle - React, Tailwind, and code Playground

HTML

<div class="searchbox">
<input type="text" />
<button id="clearSearch">x</button>
</div>
<button id="reset">reset</button>

CSS

.searchbox {
    float: right;
}

JavaScript

$('#clearSearch').hide();
$('.searchbox input').keyup(function() {
    if($('.searchbox input').val() !== '') {
        if($('#clearSearch:hidden')) {
            $('.searchbox input').stop().animate({
                marginRight: 20
            }, 500, function() {
                
                alert('first animation complete!');
                $('#clearSearch').stop().fadeIn(500);
                
            });
            
        }
    }
});

$('#reset').click(function(){
    $('#clearSearch').hide();
    $('.searchbox input').css({marginRight: 0});
    $('.searchbox input').val('');
});