JSFiddle - React, Tailwind, and code Playground

HTML

<div class="x1">
  <img src="https://api.fnkr.net/testimg/350x200/00CED1/FFF/?text=find ID from JS">
</div>

 <input id="inp1" type="text" name="" value="" placeholder="ENTER NEW ID">
<p class="h_text">No Results</p>
<a id="lk1" href="#">true link id="lk1"</a>
<button id="id1" >~X~</button>


<script src="https://code.jquery.com/jquery-1.9.1.js" integrity="sha256-e9gNBsAcA0DBuRWbm0oZfbiCyhjLrI6bmqAl5o+ZjUA=" crossorigin="anonymous"></script>

CSS

* {
  padding: 0;
  margin: 0;
}

body {
  background-color: #ccc;
}

.x1 {
  width: 300px;
  height: 160px;
  margin: 0 auto;
  background-color: pink;
}

.x1 img {
  width: 100%;
  height: 100%;
}

.x2 {
  background-color: red !important;
}

#inp1 {
  width: 300px;
  display: block;
  text-align: center;
  margin: 25px auto 25px;
  font: 28px "Tahoma";
  outline: none;
}

.h_text {
  display: block;
  text-align: center;
  margin: 25px auto 25px;
  font: 28px "Tahoma";
  color: #000;
  width: 300px;
}

#id1 {
  text-align: center;
  font-size: 34px;
  display: block;
  margin: 0 auto 0;
}

#lk1 {
  display: block;
  text-align: center;
  margin: 25px auto 25px;
  font: 32px "Tahoma";
}

body .red {
  background-color: red !important;
  color: #fff !important;
}

body .green {
  background-color: #00FF22 !important;
  color: red !important;
}

JavaScript

$(function() {
	
  $('#id1').click(function() {
  	var id = $('#inp1').val();
    if ($('#' + id).length) {
    	$('#inp1, .h_text').removeClass('red').addClass('green');
      $('.h_text').text('True Results ' + id);
    } else {
    	$('#inp1, .h_text').removeClass('green').addClass('red');
      $('.h_text').text('False Results ' + id);
    }
  });

})