JSFiddle - React, Tailwind, and code Playground

by Vipin Patil

HTML

<div id="myparent">


<div>
<img src="https://placehold.it/800x200" id="big" width=800 height=200>
</div>
<div>
<img src="https://placehold.it/100x100" class="thumb" id="a1" onClick="javascript:asignimage(this)"  width=100 height=100>
</div>
<div>
<img src="https://placehold.it/100x120" onClick="javascript:asignimage(this)" id="a2" class="thumb" width=100 height=100>
</div><div>
<img src="https://placehold.it/100x100" onClick="javascript:asignimage(this)" id="a3" class="thumb" width=100 height=100>
</div><div>
<img src="https://placehold.it/100x120" onClick="javascript:asignimage(this)" id="a1" class="thumb" width=100 height=100>
</div>

</div>
<button onClick="javascript:removeduplicate();">remove duplicate 
</button>

CSS

.thumb{
  float:left;
  clear:none;
  margin:5px;
}

JavaScript

function asignimage(imgsrc)
 {
 big.src=imgsrc.src;
 }
 
 function removeduplicate()
 {
 

 
 $('.thumb').each(function (index, value) { 
 alert('div' + index + ':' + $(this).attr('src')); 
  $('[id="' + this.id + '"]:gt(0)').remove();
});
 
 }