JSFiddle - React, Tailwind, and code Playground

by lollero

HTML

<div id="input-container">
  <img src="https://via.placeholder.com/100x100.png/0000FF/ffffff?text=Image+1">
  <img src="https://via.placeholder.com/100x100.png/00ff00/ffffff?text=Image+2">
  <img src="https://via.placeholder.com/100x100.png/ff0000/ffffff?text=Image+3">
</div>

<div id="output-container">
  
</div>

SCSS

$margin: 1px;

body {
  margin: $margin;
}

#input-container {
  img {
    display: inline-block;
    margin: $margin;
  }
}

#output-container {
  a, img { display: inline-block; }
  img {
    width: 50px;
    height: 50px;
    margin: $margin;
  }
}

JavaScript

$('#input-container img').on("click", function() {

	// Fetches the contents of src attribute
	var imageSrc = $(this).attr('src'); 
  var outputCont = $('#output-container');  
  outputCont.html(''); // Empties the container
  
  var newImage = '<a href="#"><img src="'+ imageSrc +'"/></a>';
	for ( var i=0; i < 5; i++ ) {
	  // Appends the image to outputCont 5 times
  	$( newImage ).appendTo( outputCont ); 
  }

});