Как при нажатии на лайк прибавить еденицу, при нажатии на диз отнять?

[ekad]

Есть кнопки лайк и дизлайк и между ними цифра.
Нужно при нажатии на лайк прибавить один, и лайк сделать активным.
при нажатии сразу на дизлайк от цифры отнять два, и лайк сделать не активным, а дизлайк активным. Если сразу нажать дизлайк, то дизлайк становится активным и отнимается единица от цифры. Если при открытии сразу лайк например активный, то пи повторном нажатии лайк сделать не активным и отнять единицу.

<style>
.one path {
  fill: #909090;
}
.one .active path {
  fill: #f00;
}
</style>
<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>
</div>

[laimas]

Добавить SVG data-num="1", для дизлайк -1.

[...document.querySelectorAll('div.one svg')].forEach((button) => {
  button.addEventListener('click', function() {
    let o = document.querySelector('span.count');
    o.textContent = +o.textContent + +this.dataset.num
  });
})

Но видимо нужно проверять и крайние значения?