почему по цепочке вызовов меняется содержимое у div, на который кликнули в прошлый раз?

Есть html:

<div class = "div1">1</div>
<div class = "div2">2</div>
<div class = "div3">3</div>
<div class = "div4">4</div>
<select class = "select1">
 <option>10</option>
 <option>20</option>
 <option>30</option>
 <option>40</option>
</select>

и к нему js

document.querySelectorAll('[class^="div"]').forEach((elem) => 
{
    elem.addEventListener('click', getIt);
});
function getIt()
{
    let target = this;
    document.getElementsByClassName('select1')[0].addEventListener('change', pasteC(target));
}
function pasteC(target)
{
    return (e) =>
    {
        target.textContent = e.target.options[e.target.selectedIndex].textContent;
    }
}

Если один раз кликнуть на любой div и потом выбрать в select, то содержимое кликнутого div заменяется на выбранное.
Но, если кликнуть на два разных div, то при выборе из select меняется содержимое у всех ранее кликнутых div. Собственно почему это происходит? И второй вопрос – как оставлять для изменения содержимого только последний кликнутый элемент?