JSFiddle - React, Tailwind, and code Playground

HTML

<div class="pic" data-src='https://cdn0.iconfinder.com/data/icons/socials/512/twitter-128.png' style='background-color: red;'>CLICK ME</div>

<div class="pic" data-src='https://cdn4.iconfinder.com/data/icons/flat-brand-logo-2/512/twitter-128.png' style='background-color: green;'>CLICK ME</div>

<div class="pic" data-src='https://www.lib.umn.edu/sites/default/files/images/earth_128.png' style='background-color: blue;'/>CLICK ME</div>

<br/><br/>

<img id="picToChange" data-src="#" src='https://www.lib.umn.edu/sites/default/files/images/earth_128.png' />

CSS

.pic{
    width:auto;
    height:auto;
    display:inline-block;
        margin:10px;
}

.pic:hover{
    cursor:pointer;
}

JavaScript

$('.pic').click(function(){
    
    var newSrc = $(this).attr('data-src');
    var image = new Image();
    $(image).load(function(){
        $('#picToChange').fadeOut('fast', function(){
            $(this).attr('src', image.src).fadeIn();
        });
    });
    image.src = newSrc;
});