title: Jquery siblings display undefined in alert
body: <p>Jquery siblings display undefined
  I have quantity field and the total amount field when user enter anything in the total amount field then I have to display the quantity on alert. I don't care about the quantity for a time because I have to understand that why my jquery siblings is not working. When I enter any number then I am getting undefined in the alert.</p>
  
  <p>This is not my whole project, This is the part of the project which I have to understand the siblings. I upload the code to the below link. </p>
  
  <p>for example I have quantity and total price. If i use   var qty_number=$("#number1").val();
   then it will work for the only single field. Now I have added more button If any user clicked on add more then it will display quantity + total price + remove button. The user can add up to 10 fields. Now when the user enters anything in the total price I have to display the quantity of that row.</p>
  
  <p>if my div is out of the parent then what method i have to use it?</p>
  
  <p>Would you help me out in this?</p>
  
  <p><a href="https://jsfiddle.net/Narendra2015/pu6qy4zr/19/" rel="nofollow noreferrer">https://jsfiddle.net/Narendra2015/pu6qy4zr/19/</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function increaseValue(n) {
    var value = parseInt(document.getElementById('number' + n).value, 10);
    value = isNaN(value) ? 0 : value;
    value++;
    document.getElementById('number' + n).value = value;
  }
  
  function decreaseValue(n) {
    var value = parseInt(document.getElementById('number' + n).value, 10);
    value = isNaN(value) ? 0 : value;
    value &lt; 1 ? value = 1 : '';
    value--;
    document.getElementById('number' + n).value = value;
  }
  $(".custom").on('keyup', 'input[id^=total_p_price]', function() {
  
    var that = $(this); // CHANGE HERE
    var total_p_price = that.val();
    var qty_number = that.siblings("input[id^=number]").val();
    alert(qty_number);
    console.log(qty_number);
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="custom"&gt;
    &lt;div class="plus_minus"&gt;
      &lt;span class="value_button decrease" onclick="decreaseValue(1)" value="Decrease Value"&gt;-&lt;/span&gt;
      &lt;input type="number" id="number1" class="qty_number form_control" name="qty_number[]" value="0" class="form_control" /&gt;
      &lt;span class="value_button increase" onclick="increaseValue(1)" value="Increase Value"&gt;+&lt;/span&gt;
    &lt;/div&gt;
    &lt;input type="text" class="form_control" name="total_p_price[]" id="total_p_price" /&gt;
  &lt;/div&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>