есть 4 псевдо-счетчика на странице. Нужно: их рассинхронизировать

[fluki]

Есть html код псевдо счетчика, который должен реагировать на нажатие кнопки (+1/-1).
Сам код работает, но нужно разместить несколько таких счетчиков на странице. При банальном дублировании работает только первый счетчик, а остальные не реагируют на клик.

1)Что нужно поменять в коде, чтобы работали все счетчики одновременно на одной странице?
2)И как можно сделать, чтобы кликнутая кнопка окрашивалась в другой цвет (на данный момент она только выделяется при наведении и щелчке, потом цвет возвращается в исходный)
 

<div class="likes" style="float: right; padding-left: 10px;"> 105 </div>

<div><button class="btn" style="color: #fff; border: none; float: right; ">♥</button></div>

<onload="startTime()">
<script>
const btn = document.querySelector('.btn');
let like = true,
likeCount = document.querySelector('.likes').innerHTML;
btn.addEventListener('click', () => {
likeCount = like ? ++likeCount : --likeCount;
like = !like;
document.querySelector('.likes').innerHTML = likeCount;
});
</script>