Create Number Incrementers with plus minus buttons

Here i have explained how to create number incrementers with plus minus buttons using jQuery and CSS.

At first attach below jQuery file with head tag.

 <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

Now lets start step by step.

Step 1: Add below HTML Markup.

<div class="quantity"><input type="number" min="0" max="9" step="1" value="0">
</div>

Step 2: Add the below CSS with style tag.

.quantity {
	position: relative;
	width: 100%;
	margin-bottom: 20px;
}

.quantity input[type=number] {
	-moz-appearance: textfield;
}

.quantity input {
	width: 60px;
	padding: 0px;
	padding-left: 10px;
	margin-bottom: 10px;
}

.quantity input:focus {
	outline: 0;
}

.quantity-button {
	cursor: pointer;
	border: solid 1px solid #eee;
	width: 26px;
	text-align: center;
	color: #333;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;
}

.quantity-button.quantity-up,
.quantity-button.quantity-down,
.quantity input {
	border: solid 1px #ccc;
	display: inline-block;
	height: 42px;
	line-height: 40px;
}

.quantity-button.quantity-up {}

.quantity-button.quantity-down {
	float: left
}

Step 3: Add the below javascript with script tag.

jQuery('<div class="quantity-button quantity-up">+</div><div class="quantity-button quantity-down">-</div>').insertAfter('.quantity input');
    jQuery('.quantity').each(function () {
        var spinner = jQuery(this),
        input = spinner.find('input[type="number"]'),
        btnUp = spinner.find('.quantity-up'),
        btnDown = spinner.find('.quantity-down'),
        min = input.attr('min'),
        max = input.attr('max');

        btnUp.click(function () {
            var oldValue = parseFloat(input.val());
            if (oldValue >= max) {
                var newVal = oldValue;
            } else {
                var newVal = oldValue + 1;
            }
            spinner.find("input").val(newVal);
            spinner.find("input").trigger("change");
        });

        btnDown.click(function () {
            var oldValue = parseFloat(input.val());
            if (oldValue <= min) {
                var newVal = oldValue;
            } else {
                var newVal = oldValue - 1;
            }
            spinner.find("input").val(newVal);
            spinner.find("input").trigger("change");
        });

    });

Screenshot