javascript or jquery find nextSibling

I have a shopping cart view
cart list count
and this document

<div class="input-group input-number-group">
    <div class="input-group-button" onclick="decrement_cart(this)">
         <span class="input-number-decrement">-</span>
    </div>
    <input class="input-number text-center" type="number"
                                value="{{ $detail['product_quantity'] }}" min="0" max="1000">
    <div class="input-group-button" onclick="increment_cart(this)">
         <span class="input-number-increment">+</span>
    </div>
</div>

and I want to change the middle input value by clicking on increment/decrement div.
note: I can not use addEventListener because this document is created by ajax.

how can I change input value by clicking that ?

function increment_cart(elem) {
     console.log(elem.closest('input'));
}

>Solution :

There’s no reason why you couldn’t add the event handler using addEventListener. Even if the element you are trying to attach the handler is created dinamically after the document was loaded. But since you didn’t specify anything in details about that point on time, all I could do was suggesting how to select the sibling elements from the event handler called the way you specified in your html code (with inline event handlers). Such approach is not very good because you can attach only one handler that way and it’s not strictly bound to a clear scope but to a string that will be evaluated.

Anyway to strictly address your issue when trying to fetch the siblings, you should use .next() and .prev() (JQuery) to get the next and previous sibling. Here’s a demo to show the concept (adding on top of your code):

function increment_cart(elem) {
  const o = $(elem).prev('input');  
  const currValue = (o.val() === undefined || o.val() === '') ? 0 : parseInt(o.val());    
  o.val( currValue+1 );
}

function decrement_cart(elem) {
  const o = $(elem).next('input');  
  const currValue = (o.val() === undefined || o.val() === '') ? 0 : parseInt(o.val());    
  o.val( currValue-1 );
}

.input-group-button{
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="input-group input-number-group">
    <div class="input-group-button" onclick="decrement_cart(this)">
         <span class="input-number-decrement">-</span>
    </div>
    <input class="input-number text-center" type="number"
                                value="{{ $detail['product_quantity'] }}" min="0" max="1000">
    <div class="input-group-button" onclick="increment_cart(this)">
         <span class="input-number-increment">+</span>
    </div>
</div>