JSFiddle - React, Tailwind, and code Playground

by heera

HTML

<div id="target"></div><br />
<div id="list">
<ul>
    <li><img id="1" src="http://icons.iconarchive.com/icons/fasticon/nature/256/Red-Flower-icon.png" /></li>
    <li><img id="2" src="http://icons.iconarchive.com/icons/fasticon/nature/256/Pink-Flower-icon.png" /></li>
    <li><img id="3" src="http://icons.iconseeker.com/png/fullsize/freestyle-icons/flower.png" /></li>
<ul>
</div>

CSS

#target{width:200px;height:200px;border:solid black 1px;}

JavaScript

$(function(){
    $('#list li').on('click', 'img', function(e){
        if($('#target').html()!='')
        {
            $('#list ul li:empty')
            .html($('#target').html());
        }
        var img=$(this);
        $('#target').html(img)
        .width(img.width())
        .height(img.height());
    });
    
    $('#target').on('click', function(e){
        $('#list ul li:empty')
        .html($('#target').html());
        $(this).html('').prop('title', '')
        .width(200).height(200);
    })
    .on('mouseenter', function(e){
        if($(this).html()!='') 
            $(this).prop('title', 'Click to clear');
    })
    .on('mouseleave', function(e){
        $(this).prop('title', '');
    });            
});