JSFiddle - React, Tailwind, and code Playground

HTML

<div class="s1"><img class="s1" src="http://javascript.ru/forum/images/smilies/dance3.gif" title="ZZZ"/>Текст1</div><br>
<div class="s2"><img class="s2" src="http://javascript.ru/forum/images/smilies/write.gif" title="ZZZ"/>Текст2</div><br>
<div class="s3"><img class="s3" src="http://javascript.ru/forum/images/smilies/victory.gif" title="ZZZ"/>Текст3</div><br>
<table width="200" border="0">
  <tr>
    <td class="k1"><img class="s1" src="http://javascript.ru/forum/images/smilies/dance3.gif" title="ZZZ"/></td>
    <td class="k2"><img class="s2"src="http://javascript.ru/forum/images/smilies/write.gif" title="ZZZ"/></td>
    <td class="k1"><img class="s1"src="http://javascript.ru/forum/images/smilies/dance3.gif" title="ZZZ"/></td>
  </tr>
  <tr>
    <td class="k2"><img class="s2"src="http://javascript.ru/forum/images/smilies/write.gif" title="ZZZ"/></td>
    <td class="k1"><img class="s1"src="http://javascript.ru/forum/images/smilies/dance3.gif" title="ZZZ"/></td>
    <td class="k2"><img class="s2"src="http://javascript.ru/forum/images/smilies/write.gif" title="ZZZ"/></td>
  </tr>
  <tr>
    <td class="k3"><img class="s3"src="http://javascript.ru/forum/images/smilies/victory.gif" title="ZZZ"/></td>
    <td class="k3"><img class="s3"src="http://javascript.ru/forum/images/smilies/victory.gif" title="ZZZ"/></td>
    <td class="k1"><img class="s1"src="http://javascript.ru/forum/images/smilies/dance3.gif" title="ZZZ"/></td>
  </tr>
</table>

CSS

td{
border: 2px dotted #000;
border-radius: 16px 16px 16px;
opacity: 0.6;
}
.k1 {
background:red;
}
.k2 {
background:green;
}
.k3 {
background:orange;
}
.a{
   opacity: 1;
   border: 2px solid #000;
}
.ah{
   opacity: 1;
   border: 2px solid #000;
}
div{
width: 100px;
cursor: pointer;
border: 2px dotted #000;
border-radius: 16px 16px 16px;
opacity: 0.7;
}
div:hover
{
opacity: 1;
}

JavaScript

$(function() {
       var div = $("div[class ^= 's']");
       div.each(function(indx, elem) {
           var el = $("."+elem.className).not(elem);
           $(elem).click(function() {
               el
               .parent()
               .toggleClass("a");
           }).mouseover(function() {
               el
               .parent("td")
               .addClass("ah");
           }).mouseout(function() {
               el
               .parent("td")
               .removeClass("ah");
           })
        });
   });