У меня есть 2 квадрата и под каждым есть кнопка. У кнопок и квадратов одинаковые классы, менять их нельзя (новые можно добавлять). Кнопки никак не связаны со своими квадратами. Как мне сделать так чтобы при клике по кнопке менялся цвет только у того квадрата под которым она находится, а не у всех? У меня есть вот такая заготовка кода, но что с этим дальше делать чтобы решить задачу я додуматься не могу) Задачу мне нужно решить на чистом js без Jquery
const buttons = document.querySelectorAll('.button');
const figures = document.querySelectorAll('.figure');
function colorHandler(elem) {
elem.classList.add('red');
}
buttons.forEach(el => {
el.addEventListener('click', () => colorHandler());
})
.figure {
width: 100px;
height: 100px;
background-color: black;
}
.container:last-of-type {
margin-top: 50px;
}
.red {
background: red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="figure"></div>
<button class="button">Кнопка</button>
</div>
<div class="container">
<div class="figure"></div>
<button class="button">Кнопка</button>
</div>
<script src="js.js"></script>
</body>
</html>