JSFiddle - React, Tailwind, and code Playground

by Zero Fx

HTML

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

<a id="lk1" href="#">test</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;
}

#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";
}

JavaScript

$(document).ready(function() {
			var bd = $('body');
			var bd_link = $('body a');
			var lk_id = bd.find(bd_link).attr('id');
			// var my_id = 'lk1 ';

				$('#id1').click(function() {
					var my_id = $('#inp1').val();
					var comp = my_id == lk_id;
					
					console.log(comp);

					if (comp === true) {
						console.log('ID1='+lk_id,', & ID2='+my_id+' СПІВПАДАЮТЬ');
					}  else {
						console.log('ID1='+lk_id,', & ID2='+my_id+' НЕ СПІВПАДАЮТЬ');
					}
				});
		});