title: jquery keeping count of dynamically added/removed elements
body: <p>I have a bit of jQuery that generates a "div" when a button is pressed.  There is a limit of 10 "div"s per page.  The counter works, but when I delete one, it doesn't quite work the way I want it to. When one is deleted, and I continue adding, it duplicates the last number.</p>
  
  <p>For example if I create 6 "div"s and delete #4 leaving 5 divs, then I add another div, I will again have 6 divs, but I will have 2 "div"s labeled 6.</p>
  
  <p>Is there a better way to manage counters?</p>
  
  <pre><code>$(document).on('ready', function () {
  $("#objectivesGroup").sortable();
  var counter = 1;
  
  $("#btnAddObjective").on("click" ,function () {
      if(counter&gt;10){
          alert("Only 10 learning objectives allowed per page.");
          return false;
      }   
  
      var newTextBoxDiv = $(document.createElement('tr')).attr("id", 'objective' + counter);
      newTextBoxDiv.after().html(
          "&lt;div&gt;test&lt;/div&gt;&lt;input type='button' value='delete'&gt;");
      counter++;
  });
  
  $('body').on('click', '.removeObjective', function () {
      $(this).parent().remove();
      counter--;
  });
  });
  </code></pre>