I'm trying to modify an element class at a specified index, but it doesn't work for some reason
$('.pagination__next').click(function(){
$('.pagination__page').removeClass('active');
$('.pagination__page').eq(2).addClass('active');
});
.active {
color: red;
}
<nav class="pagination col-md-12">
<ul class="pagination__list">
<li><a rel="prev" href="#" class="pagination__previous btn-squae disable">‹</a></li>
<li><span class="pagination__page btn-squae active">1</span></li>
<li><a href="#" class="pagination__page btn-squae">2</a></li>
<li><a href="#" class="pagination__page btn-squae">...</a></li>
<li><a href="#" class="pagination__page btn-squae">14</a></li>
<li><a rel="next" href="#" class="pagination__next btn-squae">›</a></li>
</ul>
</nav>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>