JSFiddle - React, Tailwind, and code Playground
HTML
<div class="group">
<p class="name">Первый</p>
<div class="blocks">
<div class="block">1</div>
<div class="block">2</div>
<div class="block">3</div>
<div class="block">4</div>
</div>
<div class="enter">Добавить</div>
</div>
<div class="group">
<p class="name">Второй</p>
<div class="blocks">
<div class="block">1</div>
<div class="block">2</div>
<div class="block">3</div>
<div class="block">4</div>
</div>
<div class="enter">Добавить</div>
</div>
<div class="group">
<p class="name">Третий</p>
<div class="blocks">
<div class="block">1</div>
<div class="block">2</div>
<div class="block">3</div>
<div class="block">4</div>
</div>
<div class="enter">Добавить</div>
</div>
CSS
.group {
background: #cccccc;
margin: 20px;
width: min-content;
text-align: center;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.blocks {
display: flex;
}
p {
flex-basis: 100%
}
.block {
width: 50px;
height: 50px;
margin: 5px;
cursor: pointer;
background: blue;
color: white;
font-size: 24px;
text-align: center;
line-height: 50px;
}
.active {
background: red;
}
.enter {
width: 100px;
height: 50px;
line-height: 50px;
text-align: center;
cursor: pointer;
background: #999999;
margin: 5px
}
JavaScript
function q(e) {
return document.querySelector(e)
}
function qq(e) {
return document.querySelectorAll(e)
}
// Активация
var btnSizes = qq(".block");
for (var i = 0, count = btnSizes.length; i < count; i++) {
btnSizes[i].addEventListener("click", function() {
this.classList.add("active");
})
}
// Добавление в массив
var btnAdd = qq(".enter");
var array = [];
for (var i = 0, count = btnAdd.length; i < count; i++) {
btnAdd[i].addEventListener("click", function() {
let name = this.parentNode.querySelector(".name").innerText;
let activeSize = this.parentNode.querySelector(".active").innerText;
array.push([name, activeSize])
console.log(array);
})
}