JSFiddle - React, Tailwind, and code Playground

by gentou

HTML

<!--<img src="https://s-media-cache-ak0.pinimg.com/736x/00/16/0c/00160c5d09ac2cf62cc4f36782b919b6.jpg" alt="">

<p id="counter">1</p> -->
<table>
  <tr id="catlist">
    
  </tr>
</table>
<div class="container">


</div>

CSS

p,
img,
h3{
  text-align: center;
}

img {
  display: block;
  width: 60%;
  height: 60%;
  margin: 0 auto;
}

JavaScript

var counter = $("#counter");
var iterations = 0;
var uid = 0;
var container = $(".container");
var catlist = $("#catlist");
var cats = [];

function update_table(){
	catlist.text("");
	for (i in cats){
  	catlist.append("<td data-it=\"" + cats[i].cat_id + "\">" + cats[i].cat_name + "</td>");
  }
}


function create_cat(name, callback) {
  uid++;
  cat = {
    cat_name: name,
    clicks: 0,
    cat_id: uid
  }
  cats.push(cat);
  callback();
}

function place_cat(cat) {
  container.append(
    "<div data-id="+ cat.cat_id + " class=\"kitty\">\
    <h3>"+ cat.cat_name +"</h3>\
    	<img src=\"https://s-media-cache-ak0.pinimg.com/736x/00/16/0c/00160c5d09ac2cf62cc4f36782b919b6.jpg\" alt=\"\">\
    <p >" + cat.clicks + "</p></div>");
}

function find_kitty(id){
 for (counter in cats){
		if (cats[counter].cat_id == id){
    		return cats[counter];

    } 
 }
}


$(".container").on("click", ".kitty", function() {
  console.log("clicked");
  that = $(this);
	id = that.data("id");
  counts = that.find("p");
  kitty = find_kitty(id);
  kitty.clicks++;
  counts.text(kitty.clicks);
});

catlist.on("click", "tr", function() {
	container.html("");
  that = $(this);
	id = that.data("id");
  kitty = find_kitty(id);
  place_cat(kitty);
});

create_cat("Good Kitty", update_table);
create_cat("Better Kitty", update_table);
create_cat("Best Kitty", update_table);
create_cat("SUPER Kitty", update_table);