Woocommerce add to cart quantity buttons with AJAX

Question

I have on every page (product pages, single product page) plus and minus buttons next to the quantity to add up, next to the button a add to cart icon in AJAX.

I can't figure out 2 problems:

Issue 1: My plus and minus buttons adding up a weird sum instead of +1 and -1. When I click on + it adds 35 (guessing sums up the total of products on the page and adds that to quantity)

Issue 2: When I click on add to cart button, even if the quantity is 2,3 or 10 it only adds up 1 and not the amount that is in the quantity field.

woocommerce/global/quantity-input.php

<?php if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly
?>

<div class="quantity">
<input class="minus" type="button" value="-">
<input type="number" step="<?php echo esc_attr( $step ); ?>" <?php if ( is_numeric( $min_value ) ) : ?>min="<?php echo esc_attr( $min_value ); ?>"<?php endif; ?> <?php if ( is_numeric( $max_value ) ) : ?>max="<?php echo esc_attr( $max_value ); ?>"<?php endif; ?> name="<?php echo esc_attr( $input_name ); ?>" value="<?php echo esc_attr( $input_value ); ?>" title="<?php _ex( 'Qty', 'Product quantity input tooltip', 'woocommerce' ) ?>" class="input-text qty text" size="4" />
<input class="plus" type="button" value="+">
</div>

<script type="text/javascript">
    jQuery(document).ready(function($){
    $('.quantity').on('click', '.plus', function(e) {
        $input = $(this).prev('input.qty');
        var val = parseInt($input.val());
        $input.val( val+1 ).change();
    });

    $('.quantity').on('click', '.minus', 
        function(e) {
        $input = $(this).next('input.qty');
        var val = parseInt($input.val());
        if (val > 0) {
            $input.val( val-1 ).change();
        } 
    });
});
</script> 

child-theme/functions.php

add_filter( 'woocommerce_loop_add_to_cart_link', 'quantity_inputs_for_loop_ajax_add_to_cart', 10, 2 );
function quantity_inputs_for_loop_ajax_add_to_cart( $html, $product ) {
    if ( $product && $product->is_type( 'simple' ) && $product->is_purchasable() && $product->is_in_stock() && ! $product->is_sold_individually() ) {
        // Get the necessary classes
        $class = implode( ' ', array_filter( array(
            'button',
            'product_type_' . $product->get_type(),
            $product->is_purchasable() && $product->is_in_stock() ? 'add_to_cart_button' : '',
            $product->supports( 'ajax_add_to_cart' ) ? 'ajax_add_to_cart' : '',
        ) ) );

        // Adding embeding <form> tag and the quantity field
        $html = sprintf( '%s%s<a rel="nofollow" href="%s" data-quantity="%s" data-product_id="%s" data-product_sku="%s" class="%s">%s</a>%s',
            '<form class="cart">',
            woocommerce_quantity_input( array(), $product, false ),
            esc_url( $product->add_to_cart_url() ),
            esc_attr( isset( $quantity ) ? $quantity : 1 ),
            esc_attr( $product->get_id() ),
            esc_attr( $product->get_sku() ),
            esc_attr( isset( $class ) ? $class : 'button' ),
            $product->add_to_cart_text(),
            '</form>'
        );
    }
    return $html;
}

Answer 1

I fixed it with some IDs

add in function.php

add_filter( 'woocommerce_loop_add_to_cart_link', 'quantity_inputs_for_loop_ajax_add_to_cart', 10, 2 );
function quantity_inputs_for_loop_ajax_add_to_cart( $html, $product ) {
    if ( $product && $product->is_type( 'simple' ) && $product->is_purchasable() && $product->is_in_stock() && ! $product->is_sold_individually() ) {
        // Get the necessary classes
        $class = implode( ' ', array_filter( array(
            'button',
            'product_type_' . $product->get_type(),
            $product->is_purchasable() && $product->is_in_stock() ? 'add_to_cart_button' : '',
            $product->supports( 'ajax_add_to_cart' ) ? 'ajax_add_to_cart' : '',
        ) ) );

        // Adding embeding <form> tag and the quantity field
        $html = sprintf( '%s%s<a rel="nofollow" href="%s" data-quantity="%s" data-product_id="%s" id="%s" data-product_sku="%s" class="%s">%s</a>%s',
            '<form class="cart">',
            woocommerce_quantity_input( array(), $product, false ),
            esc_url( $product->add_to_cart_url() ),
            esc_attr( isset( $quantity ) ? $quantity : 1 ),
            esc_attr( $product->get_id() ),
            esc_attr( $product->get_id() ),
            esc_attr( $product->get_sku() ),
            esc_attr( isset( $class ) ? $class : 'button' ),
            $product->add_to_cart_text(),
            '</form>'
        );
    }
    return $html;
}

Add jQuery file without loop

<?php if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly

global $product;

?>

<div class="quantity">
<input class="minus" type="button" value="-">
<input type="number" data-product="<?= $product->id; ?>" step="<?php echo esc_attr( $step ); ?>" <?php if ( is_numeric( $min_value ) ) : ?>min="<?php echo esc_attr( $min_value ); ?>"<?php endif; ?> <?php if ( is_numeric( $max_value ) ) : ?>max="<?php echo esc_attr( $max_value ); ?>"<?php endif; ?> name="<?php echo esc_attr( $input_name ); ?>" value="<?php echo esc_attr( $input_value ); ?>" title="<?php _ex( 'Qty', 'Product quantity input tooltip', 'woocommerce' ) ?>" class="input-text qty text" size="4" />
<input class="plus" type="button" value="+">
</div>

add file jQuery ex. (add-to-card.js)

jQuery(document).ready(function($){
    $('.plus').on('click', function(e) {
        
        $input = $(this).prev('input.qty');
        
        var id = $(this).prev('input.qty').attr("data-product");
        
        var val = $input.val();
        
        var sum = Number(val) + Number(1);
        
        $("#"+ id).attr("data-quantity", sum);
        $input.val(sum).change();
    });
    
    
    
    $('.minus').on('click', function(e) {
        
        $input = $(this).next('input.qty');
        
        var id = $(this).next('input.qty').attr("data-product");
        
        var val = $input.val();
        
        var sum = Number(val) - Number(1);
        
        if (sum > 0) {
            $("#"+ id).attr("data-quantity", sum);
            $input.val(sum).change();
        }
    });
    

});