Плюс и минус Qty в Loop

Question

В настоящее время у меня есть функция настройки количества// количества и работы, но при добавлении этого в цикл количество количества дублируется на каждый вход при нажатии кнопок -/+ - см. Прилагаемое.

Screenshot

Любая помощь и совет будет полезным.

PHP

while ($loop->have_posts()) : $loop->the_post(); 
       $price = get_post_meta(get_the_ID(), '_regular_price', true); 
       echo '<li id="'.$subID.'">'.get_the_title().' - £'.$price .' - ID '.$product->id.' '; 
       echo '<form id="'.$product->id.'" method="POST" action="#">'; 
       echo '<input type="button" value="-" class="qtyminus" field="quantity" />'; 
       echo '<input type="text" name="quantity" value="0" class="qty" />'; 
       echo '<input type="button" value="+" class="qtyplus" field="quantity" />'; 
       echo '</form>'; 
       echo '</li>'; 
       endwhile; 

JS

function qty() { 
$('.qtyplus').click(function(e){ 
    e.preventDefault(); 
    var fieldName = $(this).attr('field'); 
    var currentVal = parseInt($('input[name='+fieldName+']').val()); 
    if (!isNaN(currentVal)) { 
    $('input[name='+fieldName+']').val(currentVal + 1); 
    } else { 
    $('input[name='+fieldName+']').val(0); 
    } 
}); 
$(".qtyminus").click(function(e) { 
    e.preventDefault(); 
    var fieldName = $(this).attr('field'); 
    var currentVal = parseInt($('input[name='+fieldName+']').val()); 
    if (!isNaN(currentVal) && currentVal > 0) { 
    $('input[name='+fieldName+']').val(currentVal - 1); 
    } else { 
    $('input[name='+fieldName+']').val(0); 
    } 
}); 
} 

Answer 1

Вы должны найти элемент в той же форме

JS

function qty() { 
    $('.qtyplus').click(function(e){ 
     e.preventDefault(); 
     var fieldName = $(this).attr('field'); 

     // find the element in the same form of the button qtyplus: 
     var element=$(this).closest('form').find('input[name='+fieldName+']'); 

     var currentVal = parseInt(element.val()); 
     if (!isNaN(currentVal)) { 
     element.val(currentVal + 1); 
     } else { 
     element.val(0); 
    } 
    }); 
    $(".qtyminus").click(function(e) { 
    e.preventDefault(); 
    var fieldName = $(this).attr('field'); 

    // find the element in the same form of the button qtyminus: 
    var element=$(this).closest('form').find('input[name='+fieldName+']'); 

    var currentVal = parseInt(element.val()); 
    if (!isNaN(currentVal) && currentVal > 0) { 
     element.val(currentVal - 1); 
    } else { 
     element.val(0); 
    } 
    }); 
} 

Answer 2

Это происходит потому, что вы нацеливаете все входы с атрибутом name="quantity" на странице. Постарайтесь более точно указать ввод, который вы хотите применить. Например:

function clickResponse(event) { 
    var parent = $(this).closest('form'); 
    var targetInput = parent.find('input[name="' + $(this).attr('field') + '"]'); 
    // your code 
}