title: How to get dynamically added HTML elements' ID attribute?
body: <p>I'm adding dynamic fields into my html. While doing this, using <strong>clone</strong>. I can set dynamically added fields' attributes like ID, but <strong>they return me null ID.</strong></p>
  
  <p><strong>How can i get dynamically added buttons' ID ?</strong></p>
  
  <p>Here are my code :</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="row form-group hide" id="items"&gt;
      &lt;div class="col-sm-3"&gt;
          &lt;input type="text" name="item1[]" class="form-control input-sm text"&gt;
      &lt;/div&gt;
      &lt;div class="col-sm-2"&gt;
          &lt;input type="text" name="item2[]" class="form-control input-sm text"&gt;
      &lt;/div&gt;
      &lt;div class="col-sm-2"&gt;
          &lt;input type="text" name="item3[]" class="form-control input-sm text"&gt;
      &lt;/div&gt;
      &lt;div class="col-sm-2"&gt;
          &lt;input type="text" name="item4[]" class="form-control input-sm text"&gt;
      &lt;/div&gt;
      &lt;div class="col-sm-2"&gt;
          &lt;input type="text" name="item5[]" class="form-control input-sm text"&gt;
      &lt;/div&gt;
      &lt;div class="col-sm-1"&gt;
          &lt;button type="button" name="item6[]" class="btn btn-danger delete"&gt;&lt;i class="glyphicon glyphicon-remove"&gt;&lt;/i&gt;&lt;/button&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="row form-group"&gt;
      &lt;div class="col-sm-4"&gt;
          &lt;div class="btn btn-success" id="add"&gt;
              add new field
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>$(document).ready(function()){
   $("#add").click(function (e){
  
          $.ajax({
              type: "POST",
              url : "someURLHERE",
          },"json");
  
          //$fieldIdCount++;
  
          var $template = $('#items');
          var $clone = $template.clone().removeClass('hide').removeAttr('id').insertBefore($template);
  
          $.get("myPhpURL", function(data){
  
          var $firstField = $clone.find('[name="item[]1"]');
          $firstField.id=('area1'+data+'ID');
          var $secondField = $clone.find('[name="item[]2"]');
          $secondField.id=('area2'+data+'ID');
          var $thirdField = $clone.find('[name="item[]3"]');
          $thirdField.id =('area3'+data+'ID');
          var $fourthField = $clone.find('[name="item[]4"]');
          $fourthField.id =('area4'+data+'ID');
          var $fifthField = $clone.find('[name="item[]5"]');
          $fifthField.id=('area5'+data+'ID');
          var $removeButtonFieldID = $clone.find('[name="item[]6"]');
          $removeButtonFieldID.id=('removeFieldsButton'+data+'ID');
  
          alert($removeButtonFieldID.id.toString());
          },"json");
  
      });
  }
  
  $("body").on("click", ".delete", function(event){
  
      alert(jQuery(this).attr("id"));
  
      $.ajax({
                  type: "POST",
                  url : "anotherURLHERE"
              },"json");
  
      $(this).parent("div").prev('div').remove();
      $(this).parent("div").prev('div').remove();
      $(this).parent("div").prev('div').remove();
      $(this).parent("div").prev('div').remove();
      $(this).parent("div").prev('div').remove();
      $(this).parent("div").parent('div').remove();   
  });
  </code></pre>
  
  <p>Here is the problem :
  <code>alert(jQuery(this).attr("id"));</code> 
  is returning null.</p>
  
  <p>I know i am cloning same elements and calling them back from same names like </p>
  
  <pre><code>var $firstField = $clone.find('[name="item[]1"]');
  </code></pre>
  
  <p>so that I cannot get any of these fields' values.</p>
  
  <p>I'm new in this, i need to add these fields dynamically and get their newly created ID numbers.</p>
  
  <p>Thanks in advance.</p>
  
  <p>--------------UPDATE-------------------</p>
  
  <p>You can change clonned elements' id number, but when it comes to using their id values in another parts of your js file, it always returns the default parent id.</p>
  
  <p>So, <strong>the solution of this situation is using append() method at once</strong>, to generate and use ID numbers of dynamically added html elements. That worked for me.</p>