Input Quantity Button Plus and Minus

function plus(elem){    let targetElem = elem.parentNode.previousElementSibling.childNodes[0];    let targetCount = parseInt(targetElem.value);    targetCount++;    targetElem.value = targetCount;}function minus(elem){    let targetElem = elem.parentNode.nextElementSibling.childNodes[0];    let targetCount = parseInt(targetElem.value);    if (targetCount > 1) {        targetCount--;        targetElem.value = targetCount;    }}

<c:forEach var = "row" items = "${result.rows}">        <tr>            <td><c:out value = "${row.gift_code}"/></td>            <td><c:out value = "£${row.price}"/></td>            <td><c:out value = "${row.stock}"/></td>            <td><div id="outer">                <div><button type="button" name="button"onclick="minus(this)"><img src="minus.jpg" alt="minus"/></button></div>                <div><input type="text" name="name" value="1" size="10" id="count1"></div>                <div><button type="button" name="button"onclick="plus(this)"><img src="plus.jpg" alt="plus"/></button></div>                                                <div><button type="button" name="button"onclick="minus(this)"><img src="minus.jpg" alt="minus"/></button></div>                <div><input type="text" name="name" value="1" size="10" id="count2"></div>                <div><button type="button" name="button"onclick="plus(this)"><img src="plus.jpg" alt="plus"/></button></div>                </div>            </td>            <td>                <form action="order.jsp" method="GET">                    <input type = "hidden" name = "gift_code"                           value = "${row.gift_code}" />                    <input type = "hidden" name = "price"                           value = "${row.price}" />                    <input type = "submit" value = "Add to giftlist" />                    <input type = "hidden" name = "stock"                           value = "${row.stock}" />
                </form>            </td>        </tr>
    </c:forEach>

Custom plus and minus quantity buttons in Woocommerce 3

Your First code part is made from a customization of global/quantity-input.php Woocommerce template code…

So for testing, I have changed partially that global/quantity-input.php template code with the following (very near to your code):

?>
<div class="quantity">
    <label class="screen-reader-text" for="<?php echo esc_attr( $input_id ); ?>"><?php esc_html_e( 'Quantity', 'woocommerce' ); ?></label>
    <input type="button" value="-" class="qty_button minus" />
    <input
        type="number"
        id="<?php echo esc_attr( $input_id ); ?>"
        class="input-text qty text"
        step="<?php echo esc_attr( $step ); ?>"
        min="<?php echo esc_attr( $min_value ); ?>"
        max="<?php echo esc_attr( 0 < $max_value ? $max_value : '' ); ?>"
        name="<?php echo esc_attr( $input_name ); ?>"
        value="<?php echo esc_attr( $input_value ); ?>"
        title="<?php echo esc_attr_x( 'Qty', 'Product quantity input tooltip', 'woocommerce' ); ?>"
        size="4"
        pattern="<?php echo esc_attr( $pattern ); ?>"
        inputmode="<?php echo esc_attr( $inputmode ); ?>"
        aria-labelledby="<?php echo esc_attr( $labelledby ); ?>" />
    <input type="button" value="+" class="qty_button plus" />
</div>
<?php

Now the necessary CSS and revisited jQuery code functions:

// Minimum CSS to remove +/- default buttons on input field type number
add_action( 'wp_head' , 'custom_quantity_fields_css' );
function custom_quantity_fields_css(){
    ?>
    <style>
    .quantity input::-webkit-outer-spin-button,
    .quantity input::-webkit-inner-spin-button {
        display: none;
        margin: 0;
    }
    .quantity input.qty {
        appearance: textfield;
        -webkit-appearance: none;
        -moz-appearance: textfield;
    }
    </style>
    <?php
}


add_action( 'wp_footer' , 'custom_quantity_fields_script' );
function custom_quantity_fields_script(){
    ?>
    <script type='text/javascript'>
    jQuery( function( $ ) {
        if ( ! String.prototype.getDecimals ) {
            String.prototype.getDecimals = function() {
                var num = this,
                    match = ('' + num).match(/(?:\.(\d+))?(?:[eE]([+-]?\d+))?$/);
                if ( ! match ) {
                    return 0;
                }
                return Math.max( 0, ( match[1] ? match[1].length : 0 ) - ( match[2] ? +match[2] : 0 ) );
            }
        }
        // Quantity "plus" and "minus" buttons
        $( document.body ).on( 'click', '.plus, .minus', function() {
            var $qty        = $( this ).closest( '.quantity' ).find( '.qty'),
                currentVal  = parseFloat( $qty.val() ),
                max         = parseFloat( $qty.attr( 'max' ) ),
                min         = parseFloat( $qty.attr( 'min' ) ),
                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 && ( currentVal >= max ) ) {
                    $qty.val( max );
                } else {
                    $qty.val( ( currentVal + parseFloat( step )).toFixed( step.getDecimals() ) );
                }
            } else {
                if ( min && ( currentVal <= min ) ) {
                    $qty.val( min );
                } else if ( currentVal > 0 ) {
                    $qty.val( ( currentVal - parseFloat( step )).toFixed( step.getDecimals() ) );
                }
            }

            // Trigger change event
            $qty.trigger( 'change' );
        });
    });
    </script>
    <?php
}

Code goes in function.php file of your active child theme (or active theme). Tested and works.

The quantity buttons "plus" and "minus" work perfectly and are displayed this way:

Products are added to cart with the correct quantity:

if you change the quantity field value with plus and minus buttons, the "Update cart" button is activated when any quantity field change.

When you click on "Update cart", the quantities as correctly updated.

Plus / Minus product with button

You need to do what your code does for each .quantity group.

But there are a couple of errors in your html

• you try to access the .input-btn which is not applied to any element
• you try to set currentValue to 0 after declaring a const when you should try to set the input field to 0
• you are using the same id for the button/inputs of each .quantity group which is invalid.

so

const quantities = document.querySelectorAll('.quantity');
[...quantities].forEach(function(quantity) {  const minusButton = quantity.querySelector('.minus-btn');  const plusButton = quantity.querySelector('.plus-btn');  const inputField = quantity.querySelector('.input-btn');
  minusButton.addEventListener('click', function minusProduct() {    const currentValue = Number(inputField.value);    if (currentValue > 0) {      inputField.value = currentValue - 1;    } else inputField.value = 0  });
  plusButton.addEventListener('click', function plusProduct() {    const currentValue = Number(inputField.value);    inputField.value = currentValue + 1;  });
});

<!-- Product #1 --><div class="quantity">  <button class="plus-btn" type="button" name="button"><img src="plus.svg" alt="Sample Image" /></button>  <input type="text" value="0" class="input-btn" />  <button class="minus-btn" type="button" name="button"><img src="minus.svg" alt="Sample Image" /></button></div>
<!-- Product #2 --><div class="quantity">  <button class="plus-btn" type="button" name="button"><img src="plus.svg" alt="Sample Image" /></button>  <input type="text" value="0" class="input-btn" />  <button class="minus-btn" type="button" name="button"><img src="minus.svg" alt="Sample Image" /></button></div>
<!-- Product #3 --><div class="quantity">  <button class="plus-btn" type="button" name="button"><img src="plus.svg" alt="Sample Image" /></button>  <input type="text" value="0" class="input-btn" />  <button class="minus-btn" type="button" name="button"><img src="minus.svg" alt="Sample Image" /></button></div>