I have the following HTML:

```
<div class="page">
  <div class="somecontent_1">...</div>
  <div class="somecontent_2">...</div>
  <div class="somecontent_3">...</div>
  <div class="somecontent_4">...</div>
</div>

```

Now I'd like to separate the content with a separate page so it looks something like this:

```
<div class="page">
  <div class="somecontent">...</div>
  <div class="somecontent">...</div>
</div>
<div class="newpage">
  <div class="somecontent">...</div>
  <div class="somecontent">...</div>
</div>

```

The function checks the height of each class `somecontent` and if it's larger than a certain amount, I need to move the content to a new page.
My guess is that I would need to create an empty div (newpage) and then fetch the elements after the height is exceeded and move them to the empty newpage and continue iterate like that.

My question would be how I would get all content that are after the last element that reached the height so I can move it to the new empty page that I would create. Other solutions are most welcome if there is a better way of doing it!

The code I came up with looks like this:

```
    var page = $('.page');
    var pageHeight = 0;
    $.each(page.find('.somecontent'), function() {
      if (pageHeight > 1000) {
        page.next('<div class="newpage"></div>');
        /* Somehow get all elements to add to the newly created page */
        page.next('.newpage').append(<NEXT_ELEMENTS>);
        pageHeight = 0;
      }
      pageHeight = pageHeight + $(this).height();
    });

```