Value of input not updating in jquery

Question

I am trying to update the value of input using jquery with the following HTML and Jquery code but unable to update. please help.

HTML Code

 <div class="product_quantity p-quanity-adder">
                             <span>QTY: </span>

                             <input id="quantity_input" name="quantity" type="text" value="<?php echo $minimum; ?>">

                             <div class="quantity_buttons">
                                <div id="quantity_inc_button" class="quantity_inc quantity_control add-up1 add-action1"><i class="fas fa-chevron-up"></i></div>
                                <div id="quantity_dec_button" class="quantity_dec quantity_control add-down1 add-action1"><i class="fas fa-chevron-down"></i></div>
                             </div>
                          </div>

 

Jquery code -

  $(".p-quanity-adder .add-action1").click( function(){
    if( $(this).hasClass('add-up1') ) {
    
       $("#quantity_input").val( parseInt($("#quantity_input").val()) + 1 );
    }else {
        if( parseInt($("[name=quantity]",'.p-quanity-adder').val())  > 1 ) {
         
          $("[name=quantity]").val( parseInt($("[name=quantity]").val()) - 1 );
        }
    }
} );

Answer 1

Just check the working demo here.

You can simplify the solution like this.

Make sure to link jQuery.

$(".p-quanity-adder .add-action1").click( function(){
    var value = parseInt($("#quantity_input").val());
    if( $(this).hasClass('add-up1') ) {    
      $("#quantity_input").val(value + 1);
    }else {
        if( value > 1 )                  {
          
            $("#quantity_input").val(value - 1);
        }
    }
} );

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <div class="product_quantity p-quanity-adder">
                             <span>QTY: </span>

                             <input id="quantity_input" name="quantity" type="text" value="0">

                             <div class="quantity_buttons">
                                <div id="quantity_inc_button" class="quantity_inc quantity_control add-up1 add-action1">increment<i class="fas fa-chevron-up"></i></div>
                                <div id="quantity_dec_button" class="quantity_dec quantity_control add-down1 add-action1">decrement<i class="fas fa-chevron-down"></i></div>
                             </div>
                          </div>

Answer 2

Make sure you are loading the jQuery.

Its working fine. Just run the run snippet to below to see it working and value getting updated.

Working Demo: https://jsfiddle.net/usmanmunir/xtag4y5s/6/

$(".p-quanity-adder .add-action1").click(function() {
  if ($(this).hasClass('add-up1')) {
    $("#quantity_input").val(parseInt($("#quantity_input").val()) + 1);
  } else {
    if (parseInt($("[name=quantity]", '.p-quanity-adder').val()) > 1) {
      $("[name=quantity]").val(parseInt($("[name=quantity]").val()) - 1);
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css" integrity="sha256-2XFplPlrFClt0bIdPgpz8H7ojnk10H69xRqd9+uTShA=" crossorigin="anonymous" />
<div class="product_quantity p-quanity-adder">
  <span>QTY: </span>

  <input id="quantity_input" name="quantity" type="text" value="1">

  <div class="quantity_buttons">
    <div id="quantity_inc_button" class="quantity_inc quantity_control add-up1 add-action1"><i class="fas fa-chevron-up"></i></div>
    <div id="quantity_dec_button" class="quantity_dec quantity_control add-down1 add-action1"><i class="fas fa-chevron-down"></i></div>
  </div>
</div>