How can I understand which input increase my value, I couldn't print it in the console, thanks in advance.

$(function(){
 $('.quantity').click(function(){
  let qty  = $('.qty').val();
  console.log(qty);
  });
});

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button {  
   opacity: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="quantity">1- Number <input type="number" class="qty" min="1" max="2"></div> 
<div class="quantity">2- Number <input type="number" class="qty" min="1" max="4"></div> 
<div class="quantity">3- Number <input type="number" class="qty" min="1" max="5"></div> 
<div class="quantity">4- Number <input type="number" class="qty" min="1" max="7"></div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

$('.quantity') selects all the divs with , you need either to use a .each() https://api.jquery.com/each/ to see all the diferents values of each input. As well you need to select the $(".qty") of each using $(this).children(".qty")

CodePudding user response：

I think this might work out for you. Just selecting the div with class:quantity Later just filter the input type number with class qty inside the clicked div.

$(function(){
 $('.quantity').click(function(){
  let qty  = $(this).find('.qty').val();
  console.log(qty);
  });
});

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button {  
   opacity: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="quantity">1- Number <input type="number" class="qty" min="1" max="2"></div> 
<div class="quantity">2- Number <input type="number" class="qty" min="1" max="4"></div> 
<div class="quantity">3- Number <input type="number" class="qty" min="1" max="5"></div> 
<div class="quantity">4- Number <input type="number" class="qty" min="1" max="7"></div>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>