JSFiddle - React, Tailwind, and code Playground

by mehulkar

HTML

<form method=post onsubmit="foo()">
    <input
      onclick="modify(this, -5)"
      type=button
      value="-5">
    <input
      data-max-val="50"
      type="text"
      value="0"
      pattern="\d+">
    <input
      onclick="modify(this, 10)" 
      type=button
      value="+10">
</form>

JavaScript

function foo(e) {
  e.preventDefault();
  return false;
}

function modify(e, val) {
	const input = e.parentElement.querySelector('input[type="text"]')
	let newval = +input.value + Number(val);
  newval = Math.max(0, newval); // don't go below 0
  if (input.dataset.maxVal) {
	  newval = Math.min(newval, +input.dataset.maxVal)
	}
  
	input.setAttribute('value', newval)
}