如何在矩形数组中的三个不同按钮上添加三个不同的矩形

<div class="button-container">
  <div class="button button1">Button 1</div>
  <div class="button button2">Button 2</div>
  <div class="button button3">Button 3</div>
</div>

.button-container {
  display: flex;
  justify-content: space-between;
}

.button {
  width: 100px;
  height: 50px;
  background-color: #ccc;
  border: 1px solid #000;
  text-align: center;
  line-height: 50px;
  cursor: pointer;
}

.button:hover {
  background-color: #aaa;
}

var button1 = document.querySelector('.button1');
var button2 = document.querySelector('.button2');
var button3 = document.querySelector('.button3');

button1.addEventListener('click', function() {
  // 添加按钮1的功能代码
});

button2.addEventListener('click', function() {
  // 添加按钮2的功能代码
});

button3.addEventListener('click', function() {
  // 添加按钮3的功能代码
});