JSFiddle - React, Tailwind, and code Playground

by Arindam Nayak

HTML

<script src="jquery-1.11.1.min.js"></script>
<div id="tear_sheets">
	<h2>Tear Sheets</h2>
	<ul class="box">
	<li id="t_01">	<img src="http://placekitten.com/175/300" class="image"/></li>
    <li id="t_02"> <img src="http://placekitten.com/250/300" alt="" class="image"/></li>
   <li id="t_03">    <img src="http://placekitten.com/275/300" alt="" class="image"/></li>
   <li id="t_04">    <img src="http://placekitten.com/190/300" alt="" class="image"/></li>
	</ul>

</div>

CSS

ul li#t_01{
	text-decoration: none;
	list-style: none;
}

JavaScript

var total = 4;
$("img").click(function () {
    $("img").hide();
    console.log($(this).parent().attr("id").replace("t_0"));
    var current = parseInt($(this).parent().attr("id").replace("t_0",""));
    var next = current+1;
    if(next>total)
        next = 1;
    var nextele = $("#t_0"+next).find("img").attr("src");
   $(this).hide() ;
$("#t_0"+next).show();  
     $("#t_0"+next).find("img").show();
})