Html 单击，选择并克隆到另一个字段

我想创建一个场景，它可以帮助我通过单击并选择选项来复制一些项目

这是一个例子，如果你去看看现场的话。您将看到1个红色、1个蓝色和1个绿色框

#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;
}

HTML:

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

我的目的是通过单击“一次”来选择一个蓝色或红色的小框，当我单击绿色框内的任意位置时，我想在其中克隆。例如，如果我单击红色，它必须被选中，当我在绿色框内单击时，我必须复制它，复制次数与在框内单击的次数相同

我应该按照哪种方式来做这件事？我应该开始搜索什么样的方法

我发现了下面的链接，但它对我的想法没有多大帮助

---

非常感谢你从现在起的帮助

我找到了处理这个案子的方法。如果没有Javascript，你就无法处理它。然而，这里我使用了jQuery，这里是我的逻辑：

1） 我已经创建了一个全局变量isRedOrBlue来标识用户选择的元素。每当我单击红色或蓝色的

div

，我都会相应地更改它

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": ""
    })
});

2） 现在，当我单击

绿色
div
时，基于
isRedOrBlue变量，我将它和它转换为绿色
div

希望你能理解我上面使用的逻辑

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