There are three Div elements with a box appearance. When the user clicks on any div, a copy of that div will be added to the end. The original clicked div will no longer be clickable, but the new div will be. This process can repeat indefinitely.
I attempted this, but it ended up creating two divs simultaneously and the div became clickable again!
<div id="parent" class="p">
<div class="red" class="d"></div>
<div class="green" class="d"></div>
<div class="blue" class="d"></div>
</div>
#parent{
display: flex;
flex-wrap: wrap;
}
.red{
width: 50px;
height: 50px;
background-color: red;
margin: 2px;
}
.green{
width: 50px;
height: 50px;
background-color: green;
margin: 2px;
}
.blue{
width: 50px;
height: 50px;
background-color: blue;
margin: 2px;
}
let parent = document.querySelector("#parent");
let div = document.querySelectorAll(".p div");
parent.addEventListener("click", function createDiv(e){
console.log('1');
let child = document.createElement("div");
parent.append(child);
child.classList.add(e.target.className);
console.log(e);
e.target.removeEventListener("click",createDiv());
});