Dynamic pagination button animations (jQuery)
<p>I'm working on a project which involves creating a dynamic search bar which searches through a list of students and dynamically paginates the results (10 students per page):</p>

<p><a href="https://github.com/KyleVassella/Dynamic-Paginated-Search/tree/page-button-animation-broken" rel="nofollow">https://github.com/KyleVassella/Dynamic-Paginated-Search/tree/page-button-animation-broken</a></p>

<p>I've succeeded in dynamically returning matched students and dynamically appending the correct number of page buttons based on the number of results.</p>

<p>My last requirement is include a simple animation when transitioning between pages. I'm stuck on this. </p>

<p>When you first load the page you'll find the search function works correctly - even clicking the pagination buttons animates like it should. But once you press one of the pagination buttons, the search function partially breaks (try searching something after you change pages). It still returns the correctly matched array of students (see the console.log and the appended page numbers), but some of the results seem to be invisible.</p>

<p>I believe the problem lies in my showArray2() function on line 50 (which contains my animation) or the fact that I called this function inside of a $(document).on(click) function on line 97 - not sure.</p>

<p>Perhaps I need to go about another way such as appending CSS classes - but I still can't figure out how to apply some sort of opacity change fadeout/fadein like I want with that method. Can you solve this using my current jQuery .animate() strategy and if not, what about a different way (CSS classes, etc)?</p>