JSFiddle - React, Tailwind, and code Playground

by Garry Passarella

HTML

<table style="width:100%">
  <tr>
      <td><img src="cards_gif/b.gif" class="back" id="0"/></td>
      <td><img src="cards_gif/b.gif" class="back" id="1"/></td>
      <td><img src="cards_gif/b.gif" class="back" id="2" /></td>
  </tr>
  <tr>
      <td><img src="cards_gif/b.gif" class="back" id="3" /></td>
      <td><img src="cards_gif/b.gif" class="back" id="4" /></td>
      <td><img src="cards_gif/b.gif" class="back" id="5" /></td>
  </tr>
  <tr>
      <td><img src="cards_gif/b.gif" class="back" id="6"/></td>
      <td><img src="cards_gif/b.gif" class="back" id="7" /></td>
      <td><img src="cards_gif/b.gif" class="back" id="8" /></td>
  </tr>
  <tr>
      <td><img src="cards_gif/b.gif" class="back" id="9" /></td>
      <td><img src="cards_gif/b.gif" class="back" id="10" /></td>
      <td><img src="cards_gif/b.gif" class="back" id="11" /></td>
  </tr>
</table>

CSS

* {
    background-color: lightblue;
    border-color: hsla(173,100%,50%,1.00);
    font-weight: bold;  
}

.back {
    width:100px;
    height:100px;
}

JavaScript

function flipCard(theElementID){    
    var theElement = document.getElementById(theElementID);
    theElement.src = "c1.gif"; //Enter new image url here
    alert(theElement.src);
}

$(function() {
    $('.back').on('click', function() {
        flipCard(this.id); //Pass the img id to flipCard
    }); 
});