Change the attribute in a link only inside the current div and not for all the other links

Question

Please tell me how to change the data-quantity attribute in the "Add to cart" link only inside the current div. When the quantity is increased/decreased, this quantity changes in the data-quantity attribute for all "Add to cart" links on the page.

jQuery(function($){
    
    $('.plus').on('click', function(e) {
        var val = parseInt($(this).prev('input').val());
        $(this).prev('input').val(val + 1).change();
    });
    
    $('.minus').on('click', function(e) {
        var val = parseInt($(this).next('input').val());
        if (val !== 0) {
            $(this).next('input').val(val - 1).change();
        }
    });
    
    $('.add-links').on('change', '.qty', function(event) {
        $('a.ajax_add_to_cart').attr('data-quantity',  + $(this).val());
    });
    
    $('.qty').change();
    
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="add-links clearfix">
    <div class="quantity buttons_added">
        <button type="button" value="-" class="minus">-</button>
        <input type="number" class="input-text qty text" step="1" min="1" max="" name="quantity" value="1" size="4" inputmode="numeric">
        <button type="button" value="+" class="plus">+</button>
    </div>
    <a href="#" data-quantity="1" class="button product_type_simple add_to_cart_button ajax_add_to_cart">Add to cart</a>
</div>

<div class="add-links clearfix">
    <div class="quantity buttons_added">
        <button type="button" value="-" class="minus">-</button>
        <input type="number" class="input-text qty text" step="1" min="1" max="" name="quantity" value="1" size="4" inputmode="numeric">
        <button type="button" value="+" class="plus">+</button>
    </div>
    <a href="#" data-quantity="1" class="button product_type_simple add_to_cart_button ajax_add_to_cart">Add to cart</a>
</div>

<div class="add-links clearfix">
    <div class="quantity buttons_added">
        <button type="button" value="-" class="minus">-</button>
        <input type="number" class="input-text qty text" step="1" min="1" max="" name="quantity" value="1" size="4" inputmode="numeric">
        <button type="button" value="+" class="plus">+</button>
    </div>
    <a href="#" data-quantity="1" class="button product_type_simple add_to_cart_button ajax_add_to_cart">Add to cart</a>
</div>

Answer 1

You can try using jQuery's .closest() and .find() to target the specific element like the following way:

var link = $(this).closest('.add-links').find('.ajax_add_to_cart');

Then increment/decrement the value for add/minus respectively.

Demo:

jQuery(function($){
    
    $('.plus').on('click', function(e) {
        var val = parseInt($(this).prev('input').val());
        $(this).prev('input').val(val + 1).change();        
        
        console.clear();//test, clear the console
        var link = $(this).closest('.add-links').find('.ajax_add_to_cart');
        var v =  (+link.attr('data-quantity')) + 1;
        link.attr('data-quantity', v);
        console.log('Current data-quantity: ' + link.attr('data-quantity'));//test
    });
    
    $('.minus').on('click', function(e) {
        var val = parseInt($(this).next('input').val());
        if (val !== 0) {
            $(this).next('input').val(val - 1).change();
            
            console.clear(); //test, clear the console
            var link = $(this).closest('.add-links').find('.ajax_add_to_cart');
            var v =  link.attr('data-quantity') - 1;
            link.attr('data-quantity', v);
            console.log('Current data-quantity: ' +  link.attr('data-quantity')); //test
        }                      
    });
    
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="add-links clearfix">
    <div class="quantity buttons_added">
        <button type="button" value="-" class="minus">-</button>
        <input type="number" class="input-text qty text" step="1" min="1" max="" name="quantity" value="1" size="4" inputmode="numeric">
        <button type="button" value="+" class="plus">+</button>
    </div>
    <a href="#" data-quantity="1" class="button product_type_simple add_to_cart_button ajax_add_to_cart">Add to cart</a>
</div>

<div class="add-links clearfix">
    <div class="quantity buttons_added">
        <button type="button" value="-" class="minus">-</button>
        <input type="number" class="input-text qty text" step="1" min="1" max="" name="quantity" value="1" size="4" inputmode="numeric">
        <button type="button" value="+" class="plus">+</button>
    </div>
    <a href="#" data-quantity="1" class="button product_type_simple add_to_cart_button ajax_add_to_cart">Add to cart</a>
</div>

<div class="add-links clearfix">
    <div class="quantity buttons_added">
        <button type="button" value="-" class="minus">-</button>
        <input type="number" class="input-text qty text" step="1" min="1" max="" name="quantity" value="1" size="4" inputmode="numeric">
        <button type="button" value="+" class="plus">+</button>
    </div>
    <a href="#" data-quantity="1" class="button product_type_simple add_to_cart_button ajax_add_to_cart">Add to cart</a>
</div>

Answer 2

you can change here as $(this).parents('.add-links').find('a.ajax_add_to_cart')..

jQuery(function($){
    
    $('.plus').on('click', function(e) {
        var val = parseInt($(this).prev('input').val());
        $(this).prev('input').val(val + 1).change();
    });
    
    $('.minus').on('click', function(e) {
        var val = parseInt($(this).next('input').val());
        if (val !== 0) {
            $(this).next('input').val(val - 1).change();
        }
    });
    
    $('.add-links').on('change', '.qty', function(event) {
        
        $(this).parents('.add-links').find('a.ajax_add_to_cart').attr('data-quantity',  + $(this).val());
    });
    
    $('.qty').change();
    
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="add-links clearfix">
    <div class="quantity buttons_added">
        <button type="button" value="-" class="minus">-</button>
        <input type="number" class="input-text qty text" step="1" min="1" max="" name="quantity" value="1" size="4" inputmode="numeric">
        <button type="button" value="+" class="plus">+</button>
    </div>
    <a href="#" data-quantity="1" class="button product_type_simple add_to_cart_button ajax_add_to_cart">Add to cart</a>
</div>

<div class="add-links clearfix">
    <div class="quantity buttons_added">
        <button type="button" value="-" class="minus">-</button>
        <input type="number" class="input-text qty text" step="1" min="1" max="" name="quantity" value="1" size="4" inputmode="numeric">
        <button type="button" value="+" class="plus">+</button>
    </div>
    <a href="#" data-quantity="1" class="button product_type_simple add_to_cart_button ajax_add_to_cart">Add to cart</a>
</div>

<div class="add-links clearfix">
    <div class="quantity buttons_added">
        <button type="button" value="-" class="minus">-</button>
        <input type="number" class="input-text qty text" step="1" min="1" max="" name="quantity" value="1" size="4" inputmode="numeric">
        <button type="button" value="+" class="plus">+</button>
    </div>
    <a href="#" data-quantity="1" class="button product_type_simple add_to_cart_button ajax_add_to_cart">Add to cart</a>
</div>

Answer 3

Within your event handler, you can find the specific .add-links element that contains the element the event targeted by using $(this).closest(".add-links"). So:

$('.add-links').on('change', '.qty', function(event) {
    $(this).closest(".add-links").find('a.ajax_add_to_cart').attr('data-quantity',  + $(this).val());
});