Есть блок (с любым количеством блоков внутри), который создает свои копии при нажатии на кнопку. Копии выстраиваются в столбик сбоку, центрируясь относительно родительского блока и объединяются большой фигурной скобкой. Для примера, количество блоков в первом столбике дочерних блоков не превышает 10. Код ниже. Вопрос: как сделать так, чтобы относительно новых блоков, при нажатии на них, образовывалась новая группа блоков, которая центрируется уже относительно этого блока, как показано на картинке, чтобы при смещении родительского блока, смещались и дочерние (количество таких блоков в каждой фигурной скобке не превышает 3)?
function addBlueBox(e) {
let div = document.createElement("div");
let father = this.parentElement.parentElement.parentElement.parentElement.parentElement;
console.log(father);
var col = document.getElementsByClassName('col')[7];
var content = col.getElementsByClassName('content')[0];
content.appendChild(div);
div.classList = father.classList;
div.innerHTML = father.innerHTML;
let newBtns = div.getElementsByClassName('btn2');
[...newBtns].forEach(button=>button.addEventListener("click", addBlueBox));
div.classList.remove("col");
};
let btn2s = document.getElementsByClassName('btn2');
[...btn2s].forEach(button=>button.addEventListener("click", addBlueBox));
article,
aside,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section {
display: block;
}
body .card {
position: relative;
height: 150px;
width: 300px;
z-index: 99999999 !important;
transition: all 0.3s ease;
margin: 100px 0px 100px 0px;
float: right;
background: #000;
}
body .card .cardcontainer {
position: absolute;
width: 100%;
height: 100%;
border-radius: 1rem;
background: var(--background);
color: var(--text);
}
.col {
position: absolute;
height: 100%;
top: 0;
bottom: 0;
width: 300px;
display: grid;
grid-template-columns: 1fr;
align-items: center;
}
.col:nth-child(2) {
left: 300px;
}
.col:nth-child(3) {
left: 600px;
}
.col:nth-child(4) {
left: 900px;
}
.col:nth-child(5) {
left: 1200px;
}
.col:nth-child(6) {
left: 1500px;
}
.col:nth-child(7) {
left: 1800px;
}
.col:nth-child(8) {
left: 2100px;
}
.col:nth-child(9) {
left: 2400px;
}
.col:nth-child(10) {
left: 2700px;
}
.arguments {
z-index: 9999999999;
position: absolute;
width: 90%;
height: 80%;
bottom: 0;
background: transparent;
color: white;
font-weight: bolder;
letter-spacing: 2;
border: none;
}
.add {
z-index: 99999999 !important;
}
.btn2 {
z-index: 99999999 !important;
position: absolute;
width: 25%;
bottom: 0;
}
.in-kod {
display: block;
float: right;
}
#zoomtext {
transform: scale(1);
transition: transform 0.2s ease-in-out;
}
.container {
height: 1700px;
width: 3400px;
}
.wrapper {
height: auto;
width: 300px;
}
.curly-braced-block {
position: relative;
height: auto;
}
.curly-braced-block .brace-left {
top: 0;
right: 0;
float: left;
width: 20px;
height: 100%;
position: absolute;
transform: rotate(180deg);
z-index: 999999999999999999999999;
}
.curly-braced-block .brace-left .brace-top,
.curly-braced-block .brace-left .brace-bottom {
position: absolute;
width: 10px;
height: 50%;
left: -20px;
}
.curly-braced-block .brace-left .brace-top {
top: 0;
}
.curly-braced-block .brace-left .brace-bottom {
top: 50%;
}
.curly-braced-block .brace-left .brace-top:before,
.curly-braced-block .brace-left .brace-top:after,
.curly-braced-block .brace-left .brace-bottom:before,
.curly-braced-block .brace-left .brace-bottom:after {
content: "";
height: 50%;
width: 10px;
display: block;
position: absolute;
}
.curly-braced-block .brace-left .brace-top:before {
top: 0;
left: 0;
border-left: 3px solid black;
border-top-left-radius: 10px;
}
.curly-braced-block .brace-left .brace-top:after {
bottom: 0;
left: -10px;
border-right: 3px solid black;
border-bottom-right-radius: 10px;
}
.curly-braced-block .brace-left .brace-bottom:before {
top: 0;
left: -10px;
border-right: 3px solid black;
border-top-right-radius: 10px;
}
.curly-braced-block .brace-left .brace-bottom:after {
bottom: 0;
left: 0;
border-left: 3px solid black;
border-bottom-left-radius: 10px;
}
.curly-braced-block .content {
text-align: left;
width: 300px;
margin-left: 25px;
}
.curly-braced-block .brace-right {
top: 0;
left: 0;
float: left;
width: 20px;
height: 100%;
position: absolute;
}
.curly-braced-block .brace-right .brace-top-right,
.curly-braced-block .brace-right .brace-bottom-right {
position: absolute;
width: 10px;
height: 50%;
left: 10px;
}
.curly-braced-block .brace-right .brace-top-right {
top: 0;
}
.curly-braced-block .brace-right .brace-bottom-right {
top: 50%;
}
.curly-braced-block .brace-right .brace-top-right:before,
.curly-braced-block .brace-right .brace-top-right:after,
.curly-braced-block .brace-right .brace-bottom-right:before,
.curly-braced-block .brace-right .brace-bottom-right:after {
content: "";
height: 50%;
width: 10px;
display: block;
position: absolute;
}
.curly-braced-block .brace-right .brace-top-right:before {
top: 0;
left: 0;
border-left: 3px solid black;
border-top-left-radius: 10px;
}
.curly-braced-block .brace-right .brace-top-right:after {
bottom: 0;
left: -10px;
border-right: 3px solid black;
border-bottom-right-radius: 10px;
}
.curly-braced-block .brace-right .brace-bottom-right:before {
top: 0;
left: -10px;
border-right: 3px solid black;
border-top-right-radius: 10px;
}
.curly-braced-block .brace-right .brace-bottom-right:after {
bottom: 0;
left: 0;
border-left: 3px solid black;
border-bottom-left-radius: 10px;
}
<div class="container" id="zoomtext">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col">
<div class="curly-braced-block">
<div class="brace-left">
<div class="brace-top"></div>
<div class="brace-bottom"></div>
</div>
<div class="content"></div>
</div>
</div>
<div class="col"></div>
<div class="col" style="background: red;">
<span class="in-kod">
<div class="card">
<div class="multi-button">
<span class="add">
<button class="btn2 lvl1blue">+</button>
</span>
</div>
</div>
</span>
</div>
</div>