jQuery insert after the last element

Question

I want to add elements after the last one. My current code

<div class="find"><div id="FirstElement"> /*First element loaded first */ </div><div>

$('#AddNextElement' + id).click(function (e) {
   $('<div id="NextElement' + id +'">' + /*Add after the last element*/ + '</div>').insertAfter($("#FirstElement"));
}

Current it adds only it after the first element:

1 4 3 2

I want it to add after the last element every time:

1 2 3 4

I've followed these links and I didn't find what I'm looking for:

jQuery insertAfter last item

insertAfter specific element based on ID

jQuery: Add element after another element

Thank you in advance!.

How I fixed it:

$('#AddNextElement' + id).click(function (e) {
   $('<div id="NextElement"' + id +'>' + /*Add after the last element*/ + '</div>').insertAfter($("#FirstElement").parent().find('.Finder').last());
}

I found the .parent().find('.find').last(); then insert after the last

Answer 1

Just you need last() method

$('<div id="NextElement"' + id +'>' + /*Add after the last element*/ + '</div>')
.insertAfter($('[id^="NextElement"]').last());

Answer 2

How about adding a class to all elements? It will be easier to find the last:

$('.element-class:last').after('<div class="element-class" id="NextElement"' + id +'>' + /*Add after the last element*/ + '</div>');

This of course means that your First element must also have the class:

<div class="element-class" id="FirstElement"> /*First element loaded first */ </div>