JSFiddle - React, Tailwind, and code Playground

by Vadim

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
<button class="like js-counter" type="button">
  <i class="fa fa-heart"></i>
  <span class="js-counter__value">1</span>
</button>
<button class="like js-counter" type="button">
  <i class="fa fa-heart"></i>
  <span class="js-counter__value">103</span>
</button>
<button class="like js-counter" type="button">
  <i class="fa fa-heart"></i>
  <span class="js-counter__value">20</span>
</button>

JavaScript

function Counter (initialValue) {
 return {
 	val: Number(initialValue || 0),
  increment: true,
 }
}

function onCounterClick (evt) {
 var elem = evt.currentTarget.querySelector('.js-counter__value')
 elem.jsCounter.val = elem.jsCounter.increment ? ++elem.jsCounter.val : --elem.jsCounter.val
 elem.jsCounter.increment = !elem.jsCounter.increment
 elem.textContent = elem.jsCounter.val
}

document.querySelectorAll('.js-counter').forEach(function(elem){
  var elemCounter = elem.querySelector('.js-counter__value')
	elemCounter.jsCounter = new Counter(elemCounter.textContent)
	elem.addEventListener('click', onCounterClick)
})