checkbox filter is filtering result from first page of pagination not other and changing the page is not keeping the filter result

Here is my php code. view folder has view.php file. pagination logic is stored in controller file. this code is in view.php file.

`<?php foreach(array_reverse($events->result()) as $event) : 
        $arr1 = explode(',',$event->event_category);
        $arr2 = explode(',',$event->event_tag);
        $cost = (int)($event->event_cost)?>
        <div class="filter" data-id="<?=$event->id?>" data-category="<?=$event->event_neighbourhood?><?php foreach($arr1 as $value) {
      print " ".$value;
    } ?><?php foreach($arr2 as $value) {
      print " ".$value;
    } ?> <?php if($cost>0) { echo "Paid"; }
    else {echo "Free"; }?>">
        <div class="row alt">
        <div class="col-lg-4 remove_space">
        <?=img(['src'=>$event->event_banner,'class'=>'img-responsive'])?>
        </div>
        <div class="col-lg-8">
        <span class="sub_head"><?=$event->event_title?></span>
        <span class="sub_txt"><?=$event->event_summary?></span>
        <span class="date"><?=$event->event_date_time?></span>
        <?=anchor('viewevent/detailview/'.$event->id,'View',['class'=>'btn btn-info', 'role'=>'button'])?>
        </div>
        </div>
        </div>
        <?php endforeach; ?>
        <?php else : ?>
             <div align="center">We don't have any event yet, go ahead and <?=anchor('event/add','add a new one')?>.</div>
          <?php endif; ?>
          <?php echo $pagination; ?>
    `   

Script tag for filtering result. I have placed this tag in the end of the view.php file.

    <script>
    var $filterCheckboxes = $('input[type="checkbox"]');

    $filterCheckboxes.on('change', function() {

      var selectedFilters = {};

      $filterCheckboxes.filter(':checked').each(function() {

        if (!selectedFilters.hasOwnProperty(this.name)) {
          selectedFilters[this.name] = [];
        }

        selectedFilters[this.name].push(this.value);

      });

      // create a collection containing all of the filterable elements
      var $filteredResults = $('.filter');

      // loop over the selected filter name -> (array) values pairs
      $.each(selectedFilters, function(name, filterValues) {

        // filter each .filter element
        $filteredResults = $filteredResults.filter(function() {

          var matched = false,
            currentFilterValues = $(this).data('category').split(' ');

          // loop over each category value in the current .filter's data-category
          $.each(currentFilterValues, function(_, currentFilterValue) {

            // if the current category exists in the selected filters array
            // set matched to true, and stop looping. as we're ORing in each
            // set of filters, we only need to match once

            if ($.inArray(currentFilterValue, filterValues) != -1) {
              matched = true;
              return false;
            }
          });

          // if matched is true the current .filter element is returned
          return matched;

        });
      });

      $('.filter').hide().filter($filteredResults).show();

    });

    </script>

if not possible then can i get filter elements from all the pages and stored in filteredresult. I have copied this code from jsfiidle.