JSFiddle - React, Tailwind, and code Playground

by rigids

HTML

<div id="counter">0</div><br><br><br><br><br><br><br><br> <!-- Break to create margin -->
    <div id="resource_72" class="row">
        <img id="user73" class="userimage" src="http://t0.gstatic.com/images?q=tbn:ANd9GcTIL3tdVsOBunTRd_maavvWdsmLBJ2NpE0XERI-_i62OdL1UWCmmg">
        <img id="72" onclick="imgclicked(this)" src="http://www.chessclub.com/mailing/2011/12c/like_icon.jpg">
    </div>

    <div id="resource_1" class="row">
        <img id="user73" class="userimage" src="http://t1.gstatic.com/images?q=tbn:ANd9GcQ1rnEu0Do57JATpupiaw7CE456JVy0_JvioixL8jRjPAVKjVesdw">
        <img id="73" onclick ="imgclicked()" src="http://www.chessclub.com/mailing/2011/12c/like_icon.jpg">
    </div>

CSS

.row{
border:1px solid black;
width:300px;
padding:10px;
}
.userimage{
width:120px
}
#counter{
 color:red;
margin-left:10px; 
float:left;    
}

JavaScript

function imgclicked(val)
{
$(document).ready(function() {
// alert(val.id);
//Ajax will go here
$('#counter').html(parseInt($('#counter').html(), 10) + 1);

});
}