title: How to call ajax when id is dynamic
body: <p>I have two input field with add more button. If the user clicks on "Add" button that will display two more input type text with different id name.</p>
  
  <p>I am using the keyup function on the second input field. If the user enters any value then it will call my ajax function.</p>
  
  <p>Now my issue is, How to call ajax when it is dynamic? I mean How to send the x value to the ajax? I jusr want to know about     </p>
  
  <pre><code>$("#total_p_price").keyup(function (){));
  </code></pre>
  
  <p>how to call from dynamic?</p>
  
  <p>Check When the First time I enter the number=2 and total_p_price=10 and it calculates it and display single_price=5.</p>
  
  <p><a href="https://i.stack.imgur.com/4tN0A.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4tN0A.png" alt="enter image description here"></a></p>
  
  <p>which is right. now I click on Add button. this time number=4 and total_p_price=100 and it's calculate it and display single_price=50. It's also correct but it's updated the first single_price field as well. </p>
  
  <p><a href="https://i.stack.imgur.com/SaBOG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SaBOG.png" alt="enter image description here"></a> </p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="add_row"&gt;
    &lt;input type="text" name="" id="number"&gt;
    &lt;input type="text" name="" id="total_p_price"&gt;
    &lt;input type="text" name="" id="single_price"&gt;
    &lt;div class="btn_row add_row_click"&gt; &lt;span&gt; +  &lt;/span&gt; Add &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
    $(document).ready(function() {
      var max_fields = 20; //maximum input boxes allowed
      var wrapper = $(".add_row"); //Fields wrapper
      var add_button = $(".add_row_click"); //Add button ID
  
      var x = 1; //initlal text box count
      $(add_button).click(function(e) { //on add input button click
        e.preventDefault();
        if (x &lt; max_fields) { //max input box allowed
          x++; //text box increment
  
          $(wrapper).append('&lt;div class="custom_fields"&gt;&lt;input type="text" name="" id="number' + x '"&gt;&lt;input type="text" name="" id="total_p_price' + x '"&gt;&lt;input type="text" name="" id="single_price' + x '"&gt; &lt;div class="btn_row remove_field"&gt; &lt;span&gt; - &lt;/span&gt; Remove  &lt;/div&gt;&lt;/div&gt;');
        }
      });
  
      $(wrapper).on("click", ".remove_field", function(e) { //user click on remove text
        e.preventDefault();
        //$(this).parent('custom_fields').remove();
        $(this).closest('.custom_fields').remove();
  
        x--;
      })
      $("body").on('keyup', 'input[id^=total_p_price]', function() {
        //$('input[id^=single_price]').prop('disabled', true);
        var total_p_price = $(this).val();
        var qty_number = $('input[id^=number]').val();
        $.ajax({
          type: "POST",
          url: baseUrl + "/Customer_control/calculate_total_p_price",
          data: {
            total_p_price: total_p_price,
            qty_number: qty_number
          },
          cache: false,
          success: function(html) {
            //alert(html);
            $('input[id^=single_price]').val(html);
          }
        });
      });
    });
  &lt;/script&gt;
  </code></pre>