JSFiddle - React, Tailwind, and code Playground

HTML

<pre>
   <div class="quantity">
        <input type="number" name="qty" id="qty" value="1" class="form-qty form-control" min="1">
         <div class="quantity-nav">
              <div class="quantity-button quantity-up qty-up">+</div>
              <div class="quantity-button quantity-down qty-down">-</div>
         </div>
    </div>
<pre>

CSS

.quantity{
  background: #ddd;
  position: relative;
}
.quantity-button{
  position: absolute;
  background: #000;
  color: #fff;
  padding: 5px;
  cursor: pointer;
}
.quantity-up{
  left: 250px;
  top: 15px;
}

.quantity-down{
  left: 280px;
  top: 15px;
}

JavaScript

$('.quantity-up').click(function(){
		value = parseInt($('#qty').val());
    $('#qty').val(value+1);
});
$('.quantity-down').click(function(){
		value = parseInt($('#qty').val());
    $('#qty').val(value-1);
});