JSFiddle - React, Tailwind, and code Playground

HTML

<div class="ui-block-a">
                                    <div id="test">
                                        <input type="button" value="-" onclick="decrement()" class="minus" id="jumlah" name="jumlah">
                                    </div>
                                </div>

                                <div class="ui-block-b">

                                    <input type="number" min="1" max="10" id="quantity" value="0" name="quantity" title="Qty" class="input-text qty text" size="6" pattern="" inputmode="" data-max="3" readonly>

                                </div>

                                <div class="ui-block-c">
                                    <div id="test2">
                                        <input type="button" value="+" onclick="increment()" class="plus" id="jumlah2" name="jumlah2">
                                    </div>
                                </div>

JavaScript

function increment () {
	let quantity = document.getElementById('quantity');
	quantity.value = Number(quantity.value) + 1;
  check();
}
function decrement () {
	let quantity = document.getElementById('quantity');
	quantity.value = Number(quantity.value) - 1;
  check();
}

function check() {
    let max = quantity.getAttribute("data-max");

    if (parseInt(quantity.value) > parseInt(max)) {
        alert("Amount out of max!");
    }
}