How to filter elements on click in js?

Problem :

This is the code I have so far:

$(".prod-page").each(function() {
    $(this).click(function() {
         $(".cat-item").filter(function(index) {
         // something goes here I guess?
         });
    });
});

HTML:

<div class="row">
    <div class="cat-item"></div>
    <div class="cat-item"></div>
<div class="cat-item"></div>
    (more here)
</div>

Dynamically adding the page buttons depending on number of items (12 per page):

numItems = $('.cat-item').length;
numPages = numItems / 12;
lastPage = numItems % 12;

for (i = 0; i <= numPages; i++) {
$('#page-counter').append('<div class="prod-page"></div>' );
}

if (lastPage >= 1) {
$('#page-counter').append('<div class="prod-page"></div>' );
}

$(".prod-page").each(function(i) {
$(this).text(++i);
});

.cat-item has a display: none set in css and there are multiple buttons with the class .prod-page.

When clicking on .prod-page button, I would like to .show first 12 elements, then the next 12 elements with the class .cat-item (undefined number of times).

Any idea how to approach this? The best would be modifying the code I've already written.

Solution :

try this -

when you generate the page buttons add some sort of page id

for (i = 0; i <= numPages; i++) {
    $('#page-counter').append('<div class="prod-page" data-pageid="'+i+'"></div>' );
}

then the click handler will know which page to show:

$(".prod-page").click(function() {
    var $button = $(this);
    var page_id = $button.data('pageid');
    var $items = $(".cat-item");
    for (var i=0; i< $items.length; i++) {
       if (i < page_id * 12 ||  i >= (page_id+1)*12 ) {
          $($items[i]).hide();
       }
       else {
          $($items[i]).show();
       }
    }
});