JSFiddle - React, Tailwind, and code Playground

HTML

<form id="buyForm" method="post" action="cart.php">
    <label>Choose quantity</label>
    <div>
        <a href="#" class="button">(+)increase</a>        
        <input type="text" id="qty1" name="qty[]"/>
        <a href="#" class="button">(-)decrease</a>
    </div>
    <input type="text" id="cost1"  value="50" style="display:none; visibility:hidden;" name="cost[]" />
    <input type="text" id="price1" name="price[]" />
</form>

CSS

form#buyForm {margin:30px 0 0 0;}
form#buyForm input[type="text"] {
    background:none;
    border:1px solid #953735;
    border-radius:3px;
    float:left;
    font:bold 16px Helvetica, sans-serif;
    margin-left:30px;
    margin-top:10px;
    padding:3px;
    text-align:center;
    width:50px;
}
form#buyForm div {margin:0 0 5px 0; overflow:hidden;}
form#buyForm input[type="submit"] {
    color:#fff;
    cursor:pointer;
    background:#953735;
    border:1px solid #661016;
    border-radius:3px;
    box-shadow:inset 0px 0px 1px #ad4e4e;
    font-size:14px;
    margin:10px 0 0 27px;
    overflow:hidden;
    padding:5px 15px;
    position:relative;
    text-decoration:none;
    text-shadow:1px 1px 1px #555;
}
form#buyForm label {font-size:18px;}

a {color:#666; position:relative; left:10px; top:10px; font-size:20px; text-decoration:none;}

JavaScript

// Calculate
function calc(idx) {
  var price = parseFloat(document.getElementById("cost"+idx).value)*
              parseFloat(document.getElementById("qty"+idx).value);
  //  alert(idx+":"+price);  
  document.getElementById("price"+idx).value= isNaN(price)?"0.00":price.toFixed(2);
   
}

window.onload=function() {
  document.getElementsByName("qty[]")[0].onkeyup=function() {calc(1)};
  document.getElementsByName("cost[]")[0].onkeyup=function() {calc(1)};
                             incdec();
}

      
//Increase/decrease buttons
function incdec() {
    $(".button").click(function() {
        var $button = $(this);
        var oldValue = $button.parent().find("input").val();
    
        if ($button.text() == "(+)increase") {
          var newVal = parseFloat(oldValue) + 1;
          // AJAX save would go here
        } else {
          // Don't allow decrementing below zero
          if (oldValue >= 1) {
              var newVal = parseFloat(oldValue) - 1;
              // AJAX save would go here
          }
        }
        $button.parent().find("input").val(newVal);
    });

};