JSFiddle - React, Tailwind, and code Playground

HTML

<div class="x1">
  <!-- <img src="1.jpg" height="320" width="600" name="xxx"> -->
  <img src="https://api.fnkr.net/testimg/350x200/00CED1/FFF/?text=find ID from Array JS">
</div>

<input id="inp1" type="text" name="" value="" placeholder="ENTER RIGHT ID">
<p class="h_text">No Results</p>
<!-- <a id="lk1" href="#">true id="lk1"</a> -->
<p id="true_id">true id: 'ids1' or 'ids12' or 'ids13' or 'ids14' or 'ids15' </p>
<button id="id1">~X~</button>

<button id="close">CLOSE</button>

<ul id="un_list">
  <li><a id="ids1" href="#ids1">1</a></li>
  <li><a id="ids12" href="#ids12">2</a></li>
  <li><a id="ids13" href="#ids13">3</a></li>
  <li><a id="ids14" href="#ids14">4</a></li>
  <li><a id="ids15" href="#ids15">5</a></li>
</ul>

<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;
  position: relative;
}

.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;
}

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

#close {
  width: 55px;
  height: 55px;
  background-color: yellow;
  border: 3px solid green;
  position: absolute;
  top: 0;
  right: 0;
  outline: none;
  cursor: pointer;
}

#un_list {
  overflow: hidden;
  position: relative;
  list-style: none;
  margin: 25px auto 25px;
  display: table;
}
#un_list li {
  float: left;
  margin-right: 15px;
}
#un_list a {
  text-decoration: none;
  font: 26px 'Arial';
  color: red;
}
#un_list a:hover {
  color: yellow;
}

JavaScript

$(document).ready(function() {
	var bd = $('body');
  var bd_un_link = $('body #un_list a');
	var ar3 = [];
    bd_un_link.each(
      function () {
        ar3.push(this.id)
      }
  );
  
  $('#id1').click(function() {
  
  	$('.h_text').removeClass('red').removeClass('green');  
    var val_id = $('#inp1').val();    

    for (i = 0; i < ar3.length; i++) {   
      if (ar3[i] == val_id) {
        $('.h_text').text('True Results ' + ar3[i]).addClass('green');        
      } else {							
        $('.h_text').text('False Results ' + val_id).addClass('red');     
      }
    }
    
  });
});