title: how to get dynamic id of dynamically created textbox in jquery
body: <p>i want to perform keyup event via textbox id, and all textbox are dynamically created with onclick button event. for this i have to make 20 keyup function. if i use 20 keyup function then my code will become too lengthy and complex. instead of this i want to use a common function for all textbox. can anybody suggest me how to do it..thanks </p>
  
  <p>here is what i am doing to solve it:  </p>
  
  <pre><code>&lt;div class="input_fields_wrap"&gt;
  &lt;button class="add_field_button"&gt;Add Booking&lt;/button&gt;&lt;/div&gt;
  &lt;div id='TextBoxesGroup'&gt;
      &lt;div id="TextBoxDiv1"&gt;
      &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"&gt;&lt;/script&gt; 
  &lt;script&gt;
  $(document).ready(function() {
      var counter = 2;
      $(".add_field_button").click(function() {
          if (counter &gt; 10) {
              alert("Only 10 textboxes allow");
              return false;
          }
  
          var newTextBoxDiv = $(document.createElement('div'))
              .attr("id", 'TextBoxDiv' + counter);
  
          newTextBoxDiv.after().html('&lt;div id="target"&gt;&lt;label&gt;Textbox #' + counter + ' : &lt;/label&gt;' +
              '&lt;input type="text" name="textbox' + counter +
              '" id="firsttextbox' + counter + '" value="" &gt;&amp;nbsp;&amp;nbsp;&lt;input type="text" name="textbox' + counter +
              '" id="secondtextbox' + counter + '" value="" &gt;  &lt;a href="#" id="remove_field"&gt;Remove&lt;/a&gt;&lt;input type="text" id="box' + counter + '" value=""&gt;sum&lt;/div&gt;');
          newTextBoxDiv.appendTo("#TextBoxesGroup");
  
          counter++;
  
      });
  
      function check(a, b) {
          var first = a;
          var second = b;
          var temp = temp;
          var novalue = "";
          result = parseInt(first) + parseInt(second);
          if (!isNaN(result)) {
              return result;
          } else {
              return novalue;
          }
      }
  
  
      $(this).on("keyup", "#firsttextbox2", function(e) {
          e.preventDefault();
          var a = document.getElementById('firsttextbox2').value;
          var b = document.getElementById('secondtextbox2').value;
          var number = 2;
          result = check(a, b);
          document.getElementById('box2').value = result;
  
      });
  
      $(this).on("keyup", "#firsttextbox3", function(e) {
          var number = 3;
          e.preventDefault();
          var a = document.getElementById('firsttextbox3').value;
          var b = document.getElementById('secondtextbox3').value;
          result = check(a, b);
          document.getElementById('box3').value = result;
      });
  
      $(this).on("keyup", "#firsttextbox4", function(e) {
          var number = 4;
          e.preventDefault();
          var a = document.getElementById('firsttextbox4').value;
          var b = document.getElementById('secondtextbox4').value;
          result = check(a, b);
          final = document.getElementById('box4').value = result;
      });
  
      $(this).on("keyup", "#secondtextbox2", function(e) {
          e.preventDefault();
          var a = document.getElementById('firsttextbox2').value;
          var b = document.getElementById('secondtextbox2').value;
  
          result = check(a, b);
          document.getElementById('box2').value = result;
  
      });
  
      $(this).on("keyup", "#secondtextbox3", function(e) {
          e.preventDefault();
          var a = document.getElementById('firsttextbox3').value;
          var b = document.getElementById('secondtextbox3').value;
          result = check(a, b);
  
          document.getElementById('box3').value = result;
      });
  
      $(this).on("keyup", "#secondtextbox4", function(e) {
          e.preventDefault();
          var a = document.getElementById('firsttextbox4').value;
          var b = document.getElementById('secondtextbox4').value;
          result = check(a, b);
  
          document.getElementById('box4').value = result;
      });
  
  
      $(this).on("click", "#remove_field", function(e) { //user click on remove text
          e.preventDefault();
          $(this).parent('#target').remove();
          counter--;
  
      });
  
  
  });
  &lt;/script&gt;
  </code></pre>