JSFiddle - React, Tailwind, and code Playground

HTML

<div class="one">
  <svg viewBox="0 0 24 24" style="width:21px;vertical-align: middle;margin-right: 5px;">
    <path d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-1.91l-.01-.01L23 10z"></path>
  </svg>
  <span class="count">10</span>
  <svg viewBox="0 0 24 24" style="width:21px;vertical-align: middle;margin-right: 5px;">
    <path d="M15 3H6c-.83 0-1.54.5-1.84 1.22l-3.02 7.05c-.09.23-.14.47-.14.73v1.91l.01.01L1 14c0 1.1.9 2 2 2h6.31l-.95 4.57-.03.32c0 .41.17.79.44 1.06L9.83 23l6.59-6.59c.36-.36.58-.86.58-1.41V5c0-1.1-.9-2-2-2zm4 0v12h4V3h-4z"></path>
  </svg>
  <span class="count">7</span>
</div>

CSS

.one path {
  fill: #909090;
}
.one .active path {
  fill: #f00;
}

JavaScript

document.querySelectorAll('.one > svg').forEach(n => {
  const count = n.nextElementSibling;
  count.dataset.count = +count.textContent - n.classList.contains('active');
});

document.addEventListener('click', function(e) {
  const el = e.target.closest('.one');
  if (el) {
    const svg = e.target.closest('svg');
    el.querySelectorAll('svg').forEach(n => {
      const liked = n === svg && !n.classList.contains('active');
      const count = n.nextElementSibling;

      n.classList.toggle('active', liked);
      count.textContent = +count.dataset.count + liked;
    });
  }
});