JQuery/JS multipage based on number of elements

I apologize in advance if this is really simple question, I'm just not familiar with JS, thus not sure how to make it. Basically, I have div ID which holds loaded elements from database (using Elixir/Phoenix):

      <div id ='chicken'>
        <%= for chicken <- @chickens do %>
          <%= render MyApp.OrderItemView, "chicken.html", changeset: @order_item_changeset, action: order_order_item_path(@conn, :create, @order), chicken_id: chicken.id, chicken_price: chicken.price, chicken_name: chicken.name %>
        <% end %>
      </div>

So my page looks smth like this:

<div id = 'chicken'>
 <div class="menuitems"></div>
 <div class="menuitems"></div>
 <div class="menuitems"></div>
</div>

Where each class "menuitems" is a separate element loaded. Here is an example with 6 elements:

My problem is that I'm trying to have multiple pages. So if there are more than 6 elements, it's not going to fit, thus I need a button to the next page. For example if there are under 10 elements, first 6 should be visible, while others should be on another page(should be button for next page).

So far, I tried counting elements like this: var numItems = $(".chicken").children('div').length; but it only works if i change <div id = 'chicken'> to <div class = 'chicken'>.

Any suggestions, recommendations appreciated, as I'm really not sure how to make it. I assume i need to count elements, and if more that 6 create "next page".