All Pagination link comes active when page loads

All Pagination link comes active when page loads

My pagination is always loading with all pages active. I can't seem to
drop the class="active" for the other page link
<div class="pagination pagination-centered">
<ul id="pag">
{% for res in pagecount.items %}
<li class="active">
<a class="active"
href="javascript:handler_next_page({{ res.1 }})">{{
res.0 }}</a>
</li>
{% endfor %}
</ul>
</div>
I tried to use this code but it takes all of them out (removeclass doesnt
work)
$(document).ready(function() {
$items = $('#pag li.item'); // all the items
$items.click(function () {
$items.removeClass('selected'); // remove class from everything
$(this).addClass('selected'); // add class to clicked item
$('#pag li').children('ul').slideUp('slow');
$(this).siblings('ul').slideDown('slow');
});
});
I also tried this, with no success Disabled link in Bootstrap Pagination
$('.pagination .disabled a, .pagination .active a').on('click',
function(e) {
e.preventDefault();
});
I know there are many examples of this, although if someone can give me a
heads up on how to do this i"ll be thankful.