There is the next page. It has 2 input fields. A peculiar counter is bolted to each of them: 2 buttons ( button ): plus and minus. It is necessary that when you click on plus number in the corresponding input increases, and when you click on minus , it decreases.

 <div class="make_an_order"> <form action="*"> <div class="order_block"> <div class="options"> <span class="product"></span> <span class="price"><span class="value">39 грн</span> <span class="note">(за 12 кг )</span></span> <span class="to_order">заказать <span class="note">(минимум: 12 кг)</span></span> </div> <div class="numerator"> <input name="count" class="field" type="number" value="12"><span class="measure">кг</span> <button type="button" class="minus" onclick="inc(-1)"><span class="flaticon-minus-sign-of-a-line-in-horizontal-position"></span></button> <button type="button" class="plus" onclick="inc(1)"><span class="flaticon-add"></span></button> </div> </div> <br> <div class="order_block"> <div class="options"> <span class="product"></span> <span class="price"><span class="value">39 грн</span> <span class="note">(за 1 аршин )</span></span> <span class="to_order">заказать <span class="note">(минимум: 1 аршин)</span></span> </div> <div class="numerator"> <input name="count" class="field" type="number" value="1"><span class="measure">аршин</span> <button type="button" class="minus" onclick="inc(-1)"><span class="flaticon-minus-sign-of-a-line-in-horizontal-position"></span> </button> <button type="button" class="plus" onclick="inc(1)"><span class="flaticon-add"></span></button> </div> </div> </form> </div>

I tried to do it via onclick - but I couldn’t manage to set / pull the input I needed

 function inc(N) { console.log($(this).parent( ".numerator").value) }

    1 answer 1

    So, for example, we take a parent with .parentNode and then with the help of Element.querySelector() you can find the <input>

     function inc(el, v){ let i = el.parentNode.querySelector('input'); i.value = v + +i.value; } 

     function inc(el, v){ let i = el.parentNode.querySelector('input'); i.value = v + +i.value; } 
     <div class="make_an_order"> <form action="*"> <div class="order_block"> <div class="options"> <span class="product"></span> <span class="price"><span class="value">39 грн</span> <span class="note">(за 12 кг )</span></span> <span class="to_order">заказать <span class="note">(минимум: 12 кг)</span></span> </div> <div class="numerator"> <input name="count" class="field" type="number" value="12"><span class="measure">кг</span> <button type="button" class="minus" onclick="inc(this,-1)"><span class="flaticon-minus-sign-of-a-line-in-horizontal-position"></span></button> <button type="button" class="plus" onclick="inc(this,1)"><span class="flaticon-add"></span></button> </div> </div> <br> <div class="order_block"> <div class="options"> <span class="product"></span> <span class="price"><span class="value">39 грн</span> <span class="note">(за 1 аршин )</span></span> <span class="to_order">заказать <span class="note">(минимум: 1 аршин)</span></span> </div> <div class="numerator"> <input name="count" class="field" type="number" value="1"><span class="measure">аршин</span> <button type="button" class="minus" onclick="inc(this, -1)"><span class="flaticon-minus-sign-of-a-line-in-horizontal-position"></span> </button> <button type="button" class="plus" onclick="inc(this,1)"><span class="flaticon-add"></span></button> </div> </div> </form> </div>

    Zhukveri version:

     function inc(el, v) { let i = $(el.parentNode).find("input"); i.val(+i.val() + v); } 

     function inc(el, v) { let i = $(el.parentNode).find("input"); i.val(+i.val() + v); } 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="make_an_order"> <form action="*"> <div class="order_block"> <div class="options"> <span class="product"></span> <span class="price"><span class="value">39 грн</span> <span class="note">(за 12 кг )</span></span> <span class="to_order">заказать <span class="note">(минимум: 12 кг)</span></span> </div> <div class="numerator"> <input name="count" class="field" type="number" value="12"><span class="measure">кг</span> <button type="button" class="minus" onclick="inc(this,-1)"><span class="flaticon-minus-sign-of-a-line-in-horizontal-position"></span></button> <button type="button" class="plus" onclick="inc(this,1)"><span class="flaticon-add"></span></button> </div> </div> <br> <div class="order_block"> <div class="options"> <span class="product"></span> <span class="price"><span class="value">39 грн</span> <span class="note">(за 1 аршин )</span></span> <span class="to_order">заказать <span class="note">(минимум: 1 аршин)</span></span> </div> <div class="numerator"> <input name="count" class="field" type="number" value="1"><span class="measure">аршин</span> <button type="button" class="minus" onclick="inc(this, -1)"><span class="flaticon-minus-sign-of-a-line-in-horizontal-position"></span> </button> <button type="button" class="plus" onclick="inc(this,1)"><span class="flaticon-add"></span></button> </div> </div> </form> </div>