JSFiddle - React, Tailwind, and code Playground

by praveen_jegan

HTML

<div id="container">
    <div id="red"></div>
    <div id="blue"></div>
    <div id="green"></div>
</div>

CSS

#container {
    width:500px;
    height:600px;
    display:block;
}
#red {
    display:inline-block;
    width:50px;
    height:50px;
    background-color:red;
}
#blue {
    display:inline-block;
    width:50px;
    height:50px;
    background-color:blue;
}
#green {
    width:350px;
    height:350px;
    background-color:green;
}

JavaScript

var isRedOrBlue;
$('#red').on('click', function () {
    isRedOrBlue = "red";
    // For identification, I'm adding border
    $(this).css({
        "border": "1px solid #ccc"
    });
    //Vice versa I'm removing for other
    $('#blue').css({
        "border": ""
    })
});
$('#blue').on('click', function () {
    isRedOrBlue = "blue";
    // For identification, I'm adding border
    $(this).css({
        "border": "1px solid #ccc"
    })
    //Vice versa I'm removing for other
    $('#red').css({
        "border": ""
    })
});

$('#green').on('click', function () {
    if (isRedOrBlue) { // When none selected
        console.log(isRedOrBlue)
        $('#' + isRedOrBlue).clone().appendTo($(this));
    }
});