JSFiddle - React, Tailwind, and code Playground

by hanalulu

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div>
  <img class="sourceImageClass" src="http://via.placeholder.com/350x350">
  <img class="zoomImageClass" src="http://via.placeholder.com/5x5">
</div>

<div>
  <img class="sourceImageClass" src="http://via.placeholder.com/300x300">
  <img class="zoomImageClass" src="http://via.placeholder.com/5x5">
</div>

<img id="zoomImageId">

CSS

img {
  width: 100px;
  height: 100px;
}

#zoomImageId {
  width: 200px;
  height: 200px;
}

JavaScript

$(function() {
	$("div img.zoomImageClass").each(function(i,el){
		$(el).click(function(){
    	console.log($(el).attr("src"));
      var imageURL=$(el).parent().find(".sourceImageClass").attr("src");
      $("#zoomImageId").attr("src", imageURL)
    });
  });
});