JSFiddle - React, Tailwind, and code Playground

HTML

<span class='clearIcon'>
  <input type='text' name='asd' class='searchInput'  />
</span>

CSS

.clearIcon {
  position: relative;
}

.keypress {
  position: absolute;
  width: 20px;
  height: 20px;
  right: 0;
  background-color: #333;
  opacity: 0;
}

JavaScript

$("<span class='keypress'><i class='icon-remove-sign'></i></span>").appendTo($(".searchInput").parent()); 

$(".keypress").click(function(e) {
  if($(this).css('opacity') == 0) return;
  $(".searchInput").val("").focus();
  $(this).css('opacity', '0'); // hide it after clearing the text
})

// focusout
$(".searchInput").blur(function(e) {
  $(".keypress").css('opacity', '0');
})
	
$(".searchInput").focus(function() {
  if ($(".searchInput").val() != "") {
    $(".keypress").css('opacity', '1');
  }
})

$(".searchInput").keyup(function() {
  if($(this).val() != "") {
    $(".keypress").css('opacity', '1');
  } else {
    $(".keypress").css('opacity', '0');
  }
})