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;" class="like">
    <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">69</span>
  <svg viewBox="0 0 24 24" style="width:21px;vertical-align: middle;margin-right: 5px;" class="dislike">
    <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>
</div>

<div class="one">
  <svg viewBox="0 0 24 24" style="width:21px;vertical-align: middle;margin-right: 5px;" class="like active">
    <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">187</span>
  <svg viewBox="0 0 24 24" style="width:21px;vertical-align: middle;margin-right: 5px;" class="dislike">
    <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>
</div>

<div class="one">
  <svg viewBox="0 0 24 24" style="width:21px;vertical-align: middle;margin-right: 5px;" class="like">
    <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">666</span>
  <svg viewBox="0 0 24 24" style="width:21px;vertical-align:...

CSS

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

JavaScript

const like = el =>
  + (el.querySelector('.active.like') ? 1 : 0)
  - (el.querySelector('.active.dislike') ? 1 : 0);

document.querySelectorAll('.one').forEach(n => {
  const count = n.querySelector('.count');
  count.dataset.count = +count.textContent - like(n);
});

document.addEventListener('click', function(e) {
  const el = e.target.closest('.one');
  const svg = e.target.closest('svg');
  if (el && svg) {
    el.querySelectorAll('svg').forEach(n => {
      n.classList[n === svg ? 'toggle' : 'remove']('active');

      const count = el.querySelector('.count');
      count.textContent = +count.dataset.count + like(el);
    });
  }
});