I am looking to set up a scenario where I can copy items by clicking and selecting options.
Take a look at this JSFiddle to see the scene with 1 Red, 1 Blue, and 1 Green box.
#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>
The goal is to select either the blue or red box with a single click, and when clicking inside the green box, I want to create a clone of the selected box every time I click within it.
What approach should I take to achieve this, and what keywords should I start researching for the method?
I came across this link but it didn't provide much insight:
Thank you in advance for your assistance.