title: how to get my "prev" and "next" button work on pagination?
body: <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function(){
        var $pageItem = $(".pagination li")
  
        $pageItem.click(function(){
          $pageItem.removeClass("active");
          $(this).addClass("active");
        });
      });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;nav&gt;
    &lt;ul class="pagination"&gt;
      &lt;li&gt;
        &lt;a href="#" aria-label="Previous"&gt;
          &lt;span aria-hidden="true"&gt;&amp;laquo;&lt;/span&gt;
        &lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;1&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;2&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;3&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;4&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;5&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;
        &lt;a href="#" aria-label="Next"&gt;
          &lt;span aria-hidden="true"&gt;&amp;raquo;&lt;/span&gt;
        &lt;/a&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/nav&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Now, I am using bootstrap pagination and add some customise feature using jQuery to make page "active" when I click on it which mean current page.</p>
  
  <p>However, the "prev" and "next" button will be also "active".
  What can I do to only switch page "active" when click on "prev" or "next" button and not to add "active" to "prev" and "next" button.</p>