title: How to select a dynamically generated form element in jquery / javascript using its ID?
body: <p>I am trying to create a row of 3 form fields dynamically when the user clicks on the ADD button / plus symbol .</p>
  <p><a href="https://i.stack.imgur.com/oUlei.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/oUlei.png" alt="enter image description here" /></a></p>
  <p><strong>Javascript code used to create the form elements is below  :</strong></p>
  <pre><code>&lt;script type=&quot;text/javascript&quot;&gt;
      var field_counter = 1;
      var field_limit = 5;
      species = document.getElementById('species');
      breed = document.getElementById('breed');
  
  
      function addInput(divName){
  
          if (field_counter == field_limit)  {
              alert(&quot;You have reached the limit of adding &quot; + field_counter + &quot; inputs&quot;);
          }
          else {
  
              var dynamic_species = 'species'+field_counter; //dynamic id for species
              var dynamic_breed = 'breed'+field_counter;  //dynamic id for breed
              var dynamic_quantity = 'quantity'+field_counter; //dynammic id for quantity
              var dynamicForm = '&lt;div class=&quot;form-group&quot;&gt;&lt;div class=&quot;col-md-4&quot;&gt;&lt;label for=&quot;'+dynamic_species+'&quot;&gt;Animal Type&lt;/label&gt;&lt;select class=&quot;form-control input-sm '+dynamic_species+'&quot; id=&quot;'+dynamic_species+'&quot;&gt;&lt;option&gt;&lt;/option&gt;&lt;/select&gt;&lt;/div&gt;';
              dynamicForm+='&lt;div class=&quot;form-group&quot;&gt;&lt;div class=&quot;col-md-4&quot;&gt;&lt;label for=&quot;'+dynamic_breed+'&quot;&gt;Breed&lt;/label&gt;&lt;select class=&quot;form-control input-sm '+dynamic_breed+'&quot;  id=&quot;'+dynamic_breed+'&quot;&gt;&lt;option&gt;&lt;/option&gt;&lt;/select&gt;&lt;/div&gt;';
              dynamicForm+='&lt;div class=&quot;form-group&quot;&gt;&lt;div class=&quot;col-md-2&quot;&gt;&lt;label for=&quot;'+dynamic_quantity+'&quot;&gt;Quantity&lt;/label&gt;&lt;input type=&quot;number&quot; name=&quot;quantity_export&quot; id=&quot;'+dynamic_quantity+'&quot; class=&quot;form-control input-sm '+dynamic_quantity+'&quot; /&gt;&lt;/div&gt;';
              var newdiv = document.createElement('div');
              newdiv.innerHTML =  dynamicForm;
              document.getElementById(divName).appendChild(newdiv);
              document.getElementById(dynamic_species).innerHTML = species.innerHTML;
              document.getElementById(dynamic_breed).innerHTML = breed.innerHTML;
              field_counter++;
  
          }
      }
  &lt;/script&gt;
  &lt;div class=&quot;col-md-2&quot; &gt;
      &lt;label for=&quot;&quot;&gt;&amp;nbsp;&lt;/label&gt;
      &lt;i onclick=&quot;addInput('dynamicInput');&quot; style=&quot;cursor: pointer; border: none;&quot; class=&quot;fa fa-plus form-control input-sm&quot;&gt;Add&lt;/i&gt;
  
  &lt;/div&gt;
  </code></pre>
  <p>Using the above code am creating the form fields &quot;Animal Type , Breed and Quantity &quot;, all together in a row as shown in the image . Maximum number of  rows that can be added is limited to the value of the variable &quot;field_limit&quot;.</p>
  <p>The value of the drop downs are initially populated from the parent drop down using the code :</p>
  <pre><code>species = document.getElementById('species');
  breed = document.getElementById('breed'); 
  document.getElementById(dynamic_species).innerHTML = species.innerHTML;
  document.getElementById(dynamic_breed).innerHTML = breed.innerHTML;
  </code></pre>
  <p><strong>Question :</strong> How can I select the dynamically generated ID of the new form fields .</p>
  <p><a href="https://i.stack.imgur.com/bA9gI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bA9gI.png" alt="enter image description here" /></a></p>
  <p>Here is the script am using to select the first row of form fields which is in the HTML when the page loads for the first time :</p>
  <pre><code>$(&quot;#species&quot;).change(function(){
          $('#breed').empty();
          //alert($(this).val());
          var param = {'id':$(this).val()};
          $.ajax({
              type : 'POST',
              url : '&lt;?php echo base_url();?&gt;select_breed',
              dataType : 'json',
              data: param,
              success : function(data)
              {
                  var select = $('#breed');
                  select.empty().append(data);
              },
              error : function(XMLHttpRequest, textStatus, errorThrown)
              {
                  alert(XMLHttpRequest.responseText);
  
              }
          });
  
      });
  </code></pre>
  <p>The second row of form fields are created dynamically with the following ID's</p>
  <blockquote>
  <p>First Field : Animal Type : <code>ID=&quot;species1&quot;</code></p>
  <p>Second Field : Breed : <code>ID=&quot;breed1&quot;</code></p>
  <p>Third Field : Quantity : <code>ID=&quot;quantity1&quot;</code></p>
  </blockquote>
  <p>I am not able to select the dynamically generated form fields using the jquery selector :- eg: <code>$(&quot;#species1&quot;).change(function(){});</code> ,  it is not working .</p>
  <p><strong>What I am trying to do ?</strong></p>
  <p>I need to get the value of these fields using its ID attribute. Any help would be highly appreciated . Thank you .</p>