JSFiddle - React, Tailwind, and code Playground

by oduska

HTML

<link rel="stylesheet" href="https://v4-alpha.getbootstrap.com/dist/css/bootstrap.min.css">
<div class="quantity-box">
    <label for="Quantity">{{ 'products.product.quantity' | t }}</label>
    <input type="number" id="Quantity" name="quantity" value="1" min="1">
</div>

SCSS

body {
    background-color: #f9f9f9;
}

.quantity-box {
    background-color: #fff;
    position: relative;
    display: inline-block;
    min-width: 10.5em;
    
    .qty-decrease, .qty-increase {
        position: absolute;
        width: 2em;
        height: 2em;
        background: red;
        text-align: center;
        cursor: pointer;
        top: 50%;
        transform: translateY(-50%);
        font-size: 22px;
        font-weight: 500;
    }
    
    .qty-increase {
        right: 0;
    }
    
    .qty-count {
        text-align: center;
        padding: 1em 0;
        font-weight: 500;
    }
}

JavaScript

$qtyBox = $('.quantity-box');

$qtyBox.children().addClass('sr-onl');
$qtyBox.append('<div class="qty-btn qty-decrease">-</div><div class="qty-count">1</div><div class="qty-btn qty-increase">+</div>');

$('.qty-btn').on('click', function(){
	var $qtyBtn = $(this);
    var oldValue = $qtyBtn.closest('.quantity-box').find('#Quantity').val();
    
    if ( $qtyBtn.hasClass('qty-increase') ) {
    	var newVal = parseFloat(oldValue) + 1;
    } else {
    	// Don't let quantity go below 1
        if (oldValue > 1) {
        	var newVal = parseFloat(oldValue) -1;
        } else {
        	newVal = 1;
        }
    }
    
    $qtyBtn.closest('.quantity-box').find('#Quantity').val(newVal);
});