JSFiddle - React, Tailwind, and code Playground

by id10922606

HTML

<img class="photo" src="bg1.jpg"  />
<img class="photo" src="bg1.jpg"  />
<img class="photo" src="bg2.jpg"  />
<img class="photo" src="bg3.jpg"  />

CSS

.zoomimg {width:20%; }

JavaScript

//Photo Gallery with thumb & Zoom Image

$(".photo").click(function(){  

//var x = $(this)[0].getAttribute('src');
var x =    $(this).attr('src');
//alert(x);

$(this).parent().append("<div class='zoom'><img class='zoomimg' src=''  /></div>");    
$('.zoomimg').attr('src', x);

});

$(document).on('click', ".zoom", function(){ //<--See here
    //alert("Removing");
    $(this).remove();
});