JSFiddle - React, Tailwind, and code Playground
HTML
<div class="showbutton02">
<form action="/take-away/?add-to-cart=79" class="cart myform" method="post" enctype="multipart/form-data">
<div class="quantity buttons_added"><input type="button" value="-" class="minus"><input type="number" step="1" name="quantity" value="1" title="Qty" class="input-text qty text"><input type="button" value="+" class="plus"></div>
<div class="linkbtn02"><button type="submit" data-product_id="79" data-product_sku="" data-quantity="1" class="add_to_cart_button button product_type_simple">Add to cart</button></div> </form>
</div>
CSS
.minus, .qtyminus {
width: 25px;
height: 25px;
float: left;
background: #e8e8e8;
border: none;
font-size: 14px;
color: #000;
}
.plus, .qtyplus {
width: 25px;
height: 25px;
float: left;
background: #e8e8e8;
border: none;
font-size: 14px;
color: #000;
}
.linkbtn02 button {
background: none repeat scroll 0 0 #000000;
border: medium none;
color: #FFFFFF;
display: inline-block;
font-family: 'RalewaySemiBold';
font-size: 14px;
letter-spacing: 2px;
margin: 0;
outline: medium none;
padding: 4px 10px 3px;
text-transform: uppercase;
}
JavaScript
jQuery(document).ready(function($) {
$(document).on( 'click', '.plus, .minus', function() {
// Get values
var $qty = $(this).closest('.quantity').find(".qty");
var currentVal = parseFloat( $qty.val() );
var max = parseFloat( $qty.attr('max') );
var min = parseFloat( $qty.attr('min') );
var step = $qty.attr('step');
// Format values
if ( ! currentVal || currentVal == "" || currentVal == "NaN" ) currentVal = 0;
if ( max == "" || max == "NaN" ) max = '';
if ( min == "" || min == "NaN" ) min = 0;
if ( step == 'any' || step == "" || step == undefined || parseFloat( step ) == "NaN" ) step = 1;
// Change the value
if ( $(this).is('.plus') ) {
if ( max && ( max == currentVal || currentVal > max ) ) {
$qty.val( max );
} else {
$qty.val( currentVal + parseFloat( step ) );
}
} else {
if ( min && ( min==currentVal || currentVal < min ) ) {
$qty.val( min );
} else if ( currentVal > 0 ) {
$qty.val( currentVal - parseFloat( step ) );
}
}
// Trigger change event
$qty.trigger('change');
});
});