JSFiddle - React, Tailwind, and code Playground

by Vadim

HTML

<div class="item">
  <p class="single">1300</p>
  <p class="number">2</p>
  <button class="plus" data-atr="+1">+</button>
  <button class="minus" data-atr="-1">-</button>
  <p class="sum"></p>
</div>

<div class="item">
  <p class="single">300</p>
  <p class="number">1</p>
  <button class="plus" data-atr="+1">+</button>
  <button class="minus" data-atr="-1">-</button>
  <p class="sum"></p>
</div>

<div class="item">
  <p class="single">4300</p>
  <p class="number">1</p>
  <button class="plus" data-atr="+1">+</button>
  <button class="minus" data-atr="-1">-</button>
  <p class="sum"></p>
</div>

<div class="inner">
  <p>total</p>
  <p class="total"></p>
</div>

CSS

.item {
  display: flex;
}

p {
  margin-right: 20px;
}

.inner {
  display: flex;
}

JavaScript

function update() {
  const items = document.querySelectorAll('.item');
  for (let item of items) {
    let single = item.querySelector('.single').textContent;
    let number = item.querySelector('.number').textContent;
    let sum = item.querySelector('.sum');
    sum.innerHTML = single * number;
  }
}

let buttons = document.querySelectorAll('button');
for (let button of buttons) {
  button.addEventListener('click', change);
}

function total() {
  const sums = document.querySelectorAll('.sum');
  let total = document.querySelector('.total');
    total.textContent = Array.prototype.reduce.call(sums, function(acc, summ){return acc+= Number(summ.textContent)}, 0)

}


function change() {
  let elem = this.parentNode;
  let number = elem.querySelector('.number');
  let count = Number(number.textContent);
  let attr = Number(this.dataset.atr);

  number.innerHTML = count + attr;

  update();
  total();
}


update();
total();