JavaScript prevent button event on specified conditions

I have a webshop-like shopping cart function. It displayas the products that you have added. You can change the product quantity by clicking on the + and the - buttons.
On button click, an AJAX call will be sent to a PHP file that updates the database so you instantly save the actual quantity.
As you increase or decrease the selected quantity, a counter appears to indicate how many times the original product will be multiplied. You can increase or decrease the quantity between 1 and 30. As you reach for example 1, the counter stops, but the AJAX call will be sent regardless it shouldn’t go below 1.

Preview video

let subt = 30; // The value from PHP after you sent the AJAX call and reloaded the page
document.getElementById("plus").addEventListener("click", () => {
if (document.getElementById("inp").value < 30) {
    document.getElementById("inp").value = Number(document.getElementById("inp").value)+1;
}
    if (document.getElementById("inp").value > 1) {
    /*
        var bsi__data = new FormData(); bsi__data.append("pid", '(product id)'); bsi__data.append("quantity", document.getElementById("inp").value); bsi__data.append("price", "30");
        $.ajax({
            enctype: "multipart/form-data", type: "POST", url: "/assets/php/basket/q__up.php", data: bsi__data, dataType: "json", contentType: false, processData: false,
            success: function(data) { console.log(data); subt += Number('30'); document.getElementById("subtotal").textContent = formatter.format(subt); },
            error: function (data) { console.log("error"); console.log(data); }
        });
        */
        subt += Number('30'); document.getElementById("subtotal").textContent = subt;
        document.getElementById("ind").textContent = "x "+document.getElementById("inp").value;
    }
    if (document.getElementById("inp").value == 1) { document.getElementById("ind").textContent = ""; }
});
document.getElementById("min").addEventListener("click", function dicr () { 
    if (document.getElementById("inp").value > 1) { 
        document.getElementById("inp").value = Number(document.getElementById("inp").value)-1;
    }
    if (document.getElementById("inp").value >= 1) {
        /*
        var bsi__data = new FormData(); bsi__data.append("pid", "(product id)"); bsi__data.append("quantity", document.getElementById("inp").value);
        $.ajax({
            enctype: "multipart/form-data", type: "POST", url: "/assets/php/basket/q__up.php", data: bsi__data, dataType: "json", contentType: false, processData: false,
            success: function(data) { console.log("decr"); subt -= Number(30); document.getElementById("subtotal").textContent = formatter.format(subt); },
            error: function (data) { console.log("error"); console.log(data); }
        });
        */
        
        subt -= Number(30); document.getElementById("subtotal").textContent = subt;
        document.getElementById("ind").textContent = "x "+document.getElementById("inp").value;
    }
    if (document.getElementById("inp").value == 1) { document.getElementById("ind").textContent = ""; }
});
<div>
<span>Product name</span><span id="price">$30</span><span id="ind"></span>
<div>
<span id="plus">+</span>
<input type="number" id="inp" min="1" max="30" value="1" />
<span id="min">-</span><br><br>
<span>Subtotal: $</span>
<span id="subtotal">30</span>
</div>
</div>