Есть родительский блок, который при нажатии на кнопку создает такой же дочерний блок рядом. На блоках есть кнопка увеличение/уменьшение блока, которому принадлежит кнопка. Однако, если нажать на кнопку увеличения родительского блока после создания первого дочернего блока, то увеличивается первый дочерний блок. Как исправить эту ошибку?
document.body.addEventListener("click", function (e) {
if (e.target.classList.contains("zoomin")) {
var father = this;
var card = father.getElementsByClassName("card")[0];
card.style.height = card.offsetHeight + 50 + 'px';
card.style.width = card.offsetWidth + 50 + 'px';
}
});
document.body.addEventListener("click", function (e) {
if (e.target.classList.contains("lvl1blue")) {
var div = document.createElement("div");
var father = e.path[5];
var col = document.getElementsByClassName('col')[0];
var content = col.getElementsByClassName('content')[0];
content.appendChild(div);
div.classList = father.classList;
div.innerHTML = father.innerHTML
div.classList.remove("col");
}
});
html {
font-family: FuturaMediumC;
line-height: 1.15;
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.fa,
.fas {
pointer-events: none;
}
button:focus{
outline:0
}
article,
aside,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section {
display: block;
}
body {
margin: 0;
font-family: FuturaMediumC;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #212529;
text-align: left;
background: #f5f7fa;
}
html,
body {
scrollbar-color: red #1a1a1a;
scrollbar-width: thin;
}
.center {
margin: 0;
position: absolute;
top: 50%;
transform: translate(0%, -50%);
}
body .card {
position: relative;
height: 150px;
width: 300px;
display: inline-block;
z-index: 99999999 !important;
transition: all 0.3s ease;
}
.in-kod + .in-kod {
margin-top: 10rem;
}
body .card .multi-button {
z-index: 0;
position: absolute;
top: 1.25rem;
left: 1.25rem;
border-radius: 100%;
width: 0rem;
height: 0rem;
transform: translate(-50%, -50%);
transition: 0.25s cubic-bezier(0.25, 0, 0, 1);
}
body .card .multi-button button {
display: grid;
place-items: center;
position: absolute;
width: 2rem;
height: 2rem;
border: none;
border-radius: 100%;
background: #000;
color: #fff;
transform: translate(-50%, -50%);
cursor: pointer;
transition: 0.25s cubic-bezier(0.25, 0, 0, 1);
box-shadow: 0 0 0rem -0.25rem var(--background);
}
body .card .multi-button button:hover {
background: var(--text);
color: var(--background);
box-shadow: 0 0 1rem -0.25rem var(--background);
}
body .card .multi-button button:first-child:nth-last-child(1):nth-child(1),
body .card .multi-button button:first-child:nth-last-child(1) ~ *:nth-child(1) {
left: 25%;
top: 25%;
}
body .card .multi-button button:first-child:nth-last-child(2):nth-child(1),
body .card .multi-button button:first-child:nth-last-child(2) ~ *:nth-child(1) {
left: 37.5%;
top: 18.75%;
}
body .card .multi-button button:first-child:nth-last-child(2):nth-child(2),
body .card .multi-button button:first-child:nth-last-child(2) ~ *:nth-child(2) {
left: 18.75%;
top: 37.5%;
}
body .card .multi-button button:first-child:nth-last-child(3):nth-child(1),
body .card .multi-button button:first-child:nth-last-child(3) ~ *:nth-child(1) {
left: 50%;
top: 15.625%;
}
body .card .multi-button button:first-child:nth-last-child(4):nth-child(1),
body .card .multi-button button:first-child:nth-last-child(4) ~ *:nth-child(1) {
left: 66%;
top: 15.625%;
}
body .card .multi-button button:first-child:nth-last-child(3):nth-child(2),
body .card .multi-button button:first-child:nth-last-child(3) ~ *:nth-child(2) {
left: 25%;
top: 25%;
}
body .card .multi-button button:first-child:nth-last-child(3):nth-child(3),
body .card .multi-button button:first-child:nth-last-child(3) ~ *:nth-child(3) {
left: 15.625%;
top: 50%;
}
body .card .multi-button button:first-child:nth-last-child(4):nth-child(1),
body .card .multi-button button:first-child:nth-last-child(4) ~ *:nth-child(1) {
left: 62.5%;
top: 18.75%;
background: #743da0;
}
body .card .multi-button button:first-child:nth-last-child(4):nth-child(2),
body .card .multi-button button:first-child:nth-last-child(4) ~ *:nth-child(2) {
left: 37.5%;
top: 18.75%;
background: #3f72c3;
}
body .card .multi-button button:first-child:nth-last-child(4):nth-child(3),
body .card .multi-button button:first-child:nth-last-child(4) ~ *:nth-child(3) {
left: 18.75%;
top: 37.5%;
background: #FFF;
color: #000;
border: 1px solid #000;
border: 1px solid #000;
}
body .card .multi-button button:first-child:nth-last-child(4):nth-child(4),
body .card .multi-button button:first-child:nth-last-child(4) ~ *:nth-child(4) {
left: 18.75%;
top: 62.5%;
background: #FFF;
color: #000;
border: 1px solid #000;
}
body .card .cardcontainer {
position: absolute;
width: 100%;
height: 100%;
border-radius: 1rem;
background: var(--background);
color: var(--text);
}
body .card:hover .multi-button,
body .card .multi-button:focus-within {
width: 10rem;
height: 10rem;
}
::-webkit-scrollbar {
width: 8px;
height: 8px;
background-color: #1a1a1a;
}
::-webkit-scrollbar-thumb {
background-color: #000;
border-radius: 1em;
box-shadow: inset 1px 1px 10px #f3faf7;
}
::-webkit-scrollbar-thumb:hover {
background-color: #000;
}
::-webkit-scrollbar-button:vertical:start:decrement {
background-color: #000;
}
::-webkit-scrollbar-button:vertical:end:increment {
background-color: #000;
}
::-webkit-scrollbar-button:horizontal:start:decrement {
background-color: #000;
}
::-webkit-scrollbar-button:horizontal:end:increment {
background-color: #000;
}
.col {
position: absolute;
height: 100%;
top: 0;
bottom: 0;
width: 300px;
display: grid;
grid-template-columns: 1fr;
align-items: center;
}
.col {
left: 0;
}
.col:nth-child(2) {
left: 300px;
}
.col:nth-child(3) {
left: 600px;
}
.col:nth-child(4) {
left: 900px;
}
.schema2 {
display: none;
}
.blue {
--background: #3f72c3;
--text: white;
}
.purple {
--background: #743da0;
--text: white;
}
.white {
--background: #e3e8e6;
--text: black;
}
.arguments {
z-index: 9999999999;
position: absolute;
width: 90%;
height: 80%;
bottom: 0;
background: transparent;
color: white;
font-weight: bolder;
letter-spacing: 2;
border: none;
}
.arguments:focus{
outline:0
}
.add {
z-index: 99999999 !important;
}
.btn,
.btn2 {
z-index: 99999999 !important;
position: absolute;
width: 25%;
bottom: 0;
}
.in-kod {
display: block;
}
<link rel='stylesheet' hre
<link rel='stylesheet' href='https://pro.fontawesome.com/releases/v5.12.0/css/all.css'>
<div class="col">
<div class="content"></div>
</div>
<div class="col"></div>
<div class="col">
<span class="in-kod">
<div class="card blue">
<div class="multi-button">
<span class="add">
<button class="btn2 lvl1blue">+</button>
<button class="btn zoomin">
<i class="fa fa-search-plus" aria-hidden="true"></i>
</button>
</span>
</div>
<div class="cardcontainer"></div>
</div>
</span>
</div>