Adding plus and minus to the input quantity field

extra.html

<div class="pekky-stm-quantity">
  <div class="pekky-stm-minus fff"><a class="pekky-stm-btn-change" href="#" data-multi="-1">-</a></div>
  <div class="pekky-stm-input">
    
    <input type="number" class="stm_quantity_input" value="1" />
 
  </div>
  <div class="spekky-stm-plus fff"><a class="pekky-stm-btn-change" href="#" data-multi="1">+</a></div>
</div>

<style>
	input.stm_quantity_input::-webkit-outer-spin-button,
	input.stm_quantity_input::-webkit-inner-spin-button {
    	-webkit-appearance: none;
    	margin: 0;
	}

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

	.pekky-stm-quantity {
		display: flex;
	}

	.pekky-stm-btn-block { 
		min-width: 20px;
		height: 32.5px;
		border: 1px solid rgba(0,0,0,0.1);
	}

	.pekky-stm-btn-change {
	  display: block;
	  width: 100%;
	  height: 100%;
	  text-align: center;
	}

	.pekky-stm-btn-change span {
		vertical-align: middle;
	}

</style>

<script>
	jQuery( function($) {

		// Cause it kept running multiple times.
		$( '.pekky-stm-btn-change' ).off( 'click' ).on( 'click', function( event ) {

			let $button = $(this);
  
			// Find the input.
			let $input = $button.closest( '.pekky-stm-quantity' ).find( 'input.stm_quantity_input' );
			let inputVal = $input.val();
			let newVal = Math.max( 0, +inputVal + 1 * $button.data( 'multi' ) );
			$input.val( newVal );

			// Trigger blur event to replecate default behaviour. TriggerHandler works better I guess: http://api.jquery.com/triggerHandler/. bleh, it was just firing multiple times :).
			$input.trigger( 'blur' );
			// pekkyReplicateBlurEffect( $input );
		});

		/**
		 * Replicate blur effect cause .trigger() causes issues and .triggerHandler() doesn't fire.
		 * 
		 * @param $that The $input element.
		 *
		function pekkyReplicateBlurEffect( $that ) {

		 setTimeout(() => {
            var isMinimum = false;
            if ($that.val() > 99) {
                $that.val(99);
            } else if($that.val() < 1) {
                showNotification('minimum_count', null, 'warning');
                $that.val(1); 
                isMinimum = true;
            }

            var product_id = $that.attr("data-product_id"),
                cart_item_key = $that.attr("data-cart_item_key"),
                product_container = $that.parents('.stm_swc-modal'),
                quantity = $that.val()

            product_container.addClass('loading');
            
            $.ajax({
                type: 'POST',
                dataType: 'json',
                url: wc_add_to_cart_params.ajax_url,
                data: {
                    action: "stm_swc_update_quantity",
                    product_id: product_id,
                    cart_item_key: cart_item_key,
                    quantity: quantity,
                    nonce: stm_swc_global_variables['stm_swc_update_quantity_nonce']
                },
                success: function(response) {
                    if ( ! response || response.error )
                        return;

                    if(response.status == 'error') {
                        setTimeout(() => $( document.body ).trigger( 'wc_fragment_refresh' ), 1);
                        showNotification('error', response.message, 'warning');
                        product_container.removeClass('loading');
                        return;
                    }

                    var fragments = response.fragments;

                    // Replace fragments
                    if ( fragments ) {
                        $.each( fragments, function( key, value ) {
                            $( key ).replaceWith( value );
                        });
                    }
                    
                    $('.stm_swc-cart-btn, .stm_swc-wrapper, .stm_swc-modal').addClass('stm-active');
                    $('body').addClass('stm-overflow-hidden');
                    product_container.removeClass('loading');
                    if( !isMinimum ) showNotification('updated', null, 'success');
                }
            });
        }, 500);
	}
	*/

	});
</script>