1. document.addEventListener()
Ты вызываешь метож addEventListener у элемента document. Таким образом слушателя ты добавляешь именно документу. В итоге, где бы ты ни кликнул в документ (который суть враппер для всего содержимого страницы), ты получишь вызов обработчика.
Я же из документа выбираю конкретный селектор, при чем здесь весь документ?
2. document.addEventListener() можно вызывать несколько раз (как и на любом другом элементе). Если ты искал все кнопки и в цикле попытался навесить на каждую из них обработчик (а навесил каждый раз на документ), то столько раз и вызов произошел по клику. Еще раз уточню, что вызывая document.addEventListener(), ты добавляешь новый обработчик в массив обработчиков, а не перетираешь существующий. Выполни в консоли getEventListeners(document), увидишь там все обработчики, в том числе и на click.
В данном случае не нужны все кнопки, нужна конкретно одна кнопка.
3. Это уже чуть другой момент, но тоже важный. document.querySelector('elem-btn elem-btn--red to-basket ng-scope') - это поиск первого попавшегося элемента, не всех. Чтобы все найти и перечислить, надо юзать
Мне и нужен первый попавшийся элемент кнопка по которому я кликаю.