jQuery script for Next> button executes only once

So I have a page, that has

search results…
next >

The next button code is below.

<a href="?re=browse,nearby,mainmenu#page2" id="__page_next" class="nav-next">
  <span>Next</span>
  <span class="ifc ico-nav-right"></span>
</a>

It has a “Next” text, and an “>” arrow.
I added this script, so that arrow gets replaced with spinner/loader, while results are loaded

$(function () {
  $( "#__page_next" ).on( "click", function() {
    $('#__page_next .ico-nav-right').removeClass('ico-nav-right').addClass('animate-spin ico-spin5');
  });
});

So the script works fine, but only on page 1

After “Next >” is clicked the page doesn’t refresh, it only replaces results and the button is also replaced.
Script remains there the whole time, the newly loaded button(s) have same ID’s and classes, but it doesn’t replace the arrow anymore.

It seems that jquery is executed only once, doesnt continuously watch for next button being clicked but rather first time its clicked script is done.
If thats the case, how do I make the script continiously active insted of executing just once?

My appologies if question is stupid, I am not very good in javascript.

The script works only on page 1
I would like the script to continue to be active on page 2, 3, 4…