JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div class="kotak">
    <div class="gambar" data-dedi="satu"></div>
    <div class="text" data-dedi="satu">Satu</div>
  </div> 
  <div class="kotak">
    <div class="gambar" data-dedi="dua"></div>
    <div class="text" data-dedi="dua">Dua</div>
  </div>
</div>

CSS

.container{display:block;}
.gambar{width:70px;height:70px;border:1px solid red;display:inline-block;}
.teks{font-size:14px;color:red;display:inline-block;margin:0 30px}
.kotak {
  float: left;
  margin-right: 10px;
}

JavaScript

var nilaiKotak = null;
var nilaiText = null;

var compare = function() {
  console.log(nilaiKotak, nilaiText)
  
  // cek apakah kedua variable bukan null a.k.a sudah terisi
  if (nilaiKotak && nilaiText) {
  	console.info(nilaiKotak === nilaiText ? 'Sama' : 'Gak Sama')
    
    // reset kedua variable
    // nilaiKotak = null;
    // nilaiText = null;
  }
}

$('.gambar').click(function() {
	nilaiKotak = $(this).data('dedi')
  compare()
})

$('.text').click(function() {
	nilaiText = $(this).data('dedi')
  compare()
})