jquery keeping count of dynamically added/removed elements
<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>
