title: How to get ids of checked checkboxes that are generated dynamically in jquery
body: <p>My problem is that when i click on the button after checking some checkboxes, the result shows that, there is a loop problem. the id of the last checked box have been push into the array instead.</p>
  
  <p>My html looks like this:</p>
  
  <pre><code>&lt;h1&gt;Batch Testing&lt;/h1&gt;
  
  &lt;div id="batch_schedule_wraper"&gt;&lt;/div&gt;
  &lt;input type="button" id="getCheckedBoxtBtn" value="Get Checked Ids" /&gt;
  </code></pre>
  
  <p>Here is my javascript:</p>
  
  <pre><code>$(document).ready(function() {
  
  
    $('#getCheckedBoxtBtn').on('click', function() {
  
      var selected = [];
  
      $("div#batch_schedule_wraper input[type=checkbox]").each(function() {
        if ($(this).is(":checked")) {
          selected.push($(this).attr('id'));
        }
      });
  
      alert(selected);
    });
  
    var sortedIds = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
  
    for (var i = 0; i &lt; sortedIds.length; i++) {
  
      $("#batch_schedule_wraper").append("&lt;div class='checkbox'&gt;" +
        "&lt;label class='block'&gt;" +
        "&lt;input name='form-field-checkbox' type='checkbox' class='ace input-lg remove_widget' id=''/&gt;" +
        "&lt;span class='lbl bigger-120'&gt;Batch&lt;/span&gt;" +
        " &lt;/label&gt;" +
        "&lt;/div&gt;"
  
        +
        "&lt;/div&gt;");
      $("[name='form-field-checkbox']").attr("id", sortedIds[i]);
  
    }
  });
  </code></pre>