Add Pagination Buttons.any hints, suggestions and comments are very much appreciated thank you in advance for your help

Question:

function addPagination(list) { // create a variable to calculate the number of pages needed

// select the element with a class of link-list and assign it to a variable

// set the innerHTML property of the variable you just created to an empty string

// loop over the number of pages needed // create the elements needed to display the pagination button // insert the above elements

// give the first pagination button a class of "active"

// create an event listener on the link-list element // if the click target is a button: // remove the "active" class from the previous button // add the active class to the clicked button // call the showPage function passing the list parameter and page to display as arguments }

My answer:

const paginationFunction = ()=> { $(".pagination ul li a").on("click", function(){ let index = $(".pagination ul li a").index(this); $("a").removeClass("active"); $($studentsList).hide().slice(10 * index,10 * (index + 1)).show(); $(this).addClass('active'); }); }; $(window).on("load", function(e) { $($studentsList).hide().slice(0,10).show(); paginationFunction(); }); $("#searchButton").on("click", function() { $($studentsList).show(); let $filteredUserInput = $("#userInput").val().toUpperCase(); for(let i = 0; i < $studentsList.length; i++){ let $studentName = $("h3")[i].innerHTML.toUpperCase(); if($studentName.toUpperCase().indexOf($filteredUserInput) < 0 || $filteredUserInput.length == 0 || $filteredUserInput == " ") { $(".pagination").remove(); $($studentsList[i]).hide(); $(".student-list").append("<p>No student with that name.</p>"); } else if ($studentName.toUpperCase().indexOf($filteredUserInput) > 0){ $(studentsList[i]).show();

           }
       }

});