JSFiddle - React, Tailwind, and code Playground

HTML

<form action="">
  <input type="hidden" name="volume1" value="1.50">
  <input type="hidden" name="volume2" value="3.40">
  <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>
</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

function calculate() {
	const form = this
  
  const volume1 = parseFloat(form.volume1.value)
  const volume2 = parseFloat(form.volume2.value)

  const a = parseInt(form.N1.value)
  const b = parseInt(form.N2.value)

	const totalVolume = (volume1 * a) + (volume2 * b)
  const sum = (a + b) * 10;

	$('.result #vsegostuk').html(a + b)
  $('.result #vsegoml').html(`Вы израсходовали всего ${totalVolume}мл.`)
  $('.result #summaprod').html(`Вы сегодня продали товаров на сумму ${sum}р."`)
}




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)