Event listeners problem with div affection

Question

I want to click on the div and change its background for select value. When I click on another div and select the value the background changes to the previous one, I don't know why they affect each other.

const divs = document.querySelectorAll('div');
const select = document.querySelector('select');

function changeColor(div, select) {
  select.classList.remove('hidden');

  select.addEventListener('change', (e) => {
    div.style.backgroundColor = `${select.value}`;
    select.classList.add('hidden');
    e.stopPropagation();
  });
}

divs.forEach(div => {
  div.addEventListener('click', (e) => {
    changeColor(div, select);
    e.stopPropagation();
  });
});

* {
  box-sizing: border-box;
}

section {
  width: 100%;
  padding: 100px;
}

.three {
  background-color: rgb(84, 84, 177);
  margin: 10px;
}

.two {
  margin: 10px;
  background-color: green
}

.one {
  background-color: lightblue;
}

select.hidden {
  display: none;
}

<section class="one">
  <div class="two">Two</div>
  <div class="three">Three</div>
  <select class="hidden">
    <option value="red">red</option>
    <option value="yellow">yellow</option>
  </select>
</section>

Answer 1

They affect each other because you add a new event handler for the select each time you call changeColor having captured the div variable for each invocation.

Make sure you only add event handlers once:

const divs = document.querySelectorAll('div');
const select = document.querySelector('select');
let selectedDiv = null;

divs.forEach(div => {
  div.addEventListener('click', (e) => {
    select.classList.remove('hidden');
    selectedDiv = div;
    e.stopPropagation();
  });
});

select.addEventListener('change', (e) => {
  selectedDiv.style.backgroundColor = `${select.value}`;
  select.classList.add('hidden');
  e.stopPropagation();
});

* {
  box-sizing: border-box;
}

section {
  width: 100%;
  padding: 100px;
}

.three {
  background-color: rgb(84, 84, 177);
  margin: 10px;
}

.two {
  margin: 10px;
  background-color: green
}

.one {
  background-color: lightblue;
}

select.hidden {
  display: none;
}

<section class="one">
  <div class="two">Two</div>
  <div class="three">Three</div>
  <select class="hidden">
    <option value="red">red</option>
    <option value="yellow">yellow</option>
  </select>
</section>