JSFiddle - React, Tailwind, and code Playground
HTML
<form action="">
<div class="btnGroup">
<button class="minus">-</button>
<input type="number" name="N1" value="0" min="0" placeholder="Количество проданных шт">
<button class="plus">+</button>
</div>
<div class="btnGroup">
<button class="minus">-</button>
<input type="number" name="N2" value="0" min="0" placeholder="Количество проданных шт">
<button class="plus">+</button>
</div>
<div class="btnGroup">
<button class="minus">-</button>
<input type="number" name="test" value="0" min="0" placeholder="Количество проданных шт">
<button class="plus">+</button>
</div>
<div class="btnGroup">
<button class="minus">-</button>
<input type="number" name="foo" value="0" min="0" placeholder="Количество проданных шт">
<button class="plus">+</button>
</div>
</form>
<div class="result">
<div id="vsegostuk"></div>
<div id="vsegoml"></div>
<div id="summaprod"></div>
</div>
CSS
.btnGroup {
outline: dashed 1px gray;
margin: 10px;
padding: 5px;
}
.result div {
border: solid 2px lightgray;
}
JavaScript
const price = 10
const volumes = {
'test': 8,
'foo': 3.2,
'N1': 1.5,
'N2': 3.4,
}
function calculate() {
const form = this
let totalVolume = 0
let totalSum = 0;
let totalCount = 0
$('input', this).each(function(){
let inputName = this.name
let count = parseFloat(this.value)
let volume = volumes[inputName] * count
totalCount += count
totalVolume += volume
totalSum += volumes[inputName] * price
})
$('.result #vsegostuk').html(totalCount)
$('.result #vsegoml').html(`Вы израсходовали всего ${totalVolume}мл.`)
$('.result #summaprod').html(`Вы сегодня продали товаров на сумму ${totalSum}р."`)
}
function increase(evt) {
evt.preventDefault()
let $input = $(this).closest('.btnGroup').find('input')
$input.val( parseInt($input.val()) + 1)
$input.change()
}
function decrease(evt) {
evt.preventDefault()
let $input = $(this).closest('.btnGroup').find('input')
$input.val( parseInt($input.val()) - 1)
$input.change()
}
$('form').on('input change', calculate)
$('form .plus').on('click', increase)
$('form .minus').on('click', decrease)