Next previous page for CMS items using html embed

Hi,
I have read through multiple guides on creating a next previous page button between CMS item pages.
and found this guide most helpful: Native linking to previous and next post using CMS (expanded)

However, this method was very difficult and a bit hit-and-miss for me.

So here is what I am hoping to create:
An HTML embed code that checks the current item number then loads the next or previous item chronologically when a button is clicked. Then I would like this button to auto-hide its self when there are no more pages to load.

I’m thinking of having two separate codes, one for loading the “next item” and one for the “previous item” in order to further simplify this process.

so something on the lines of:

get next item
$(‘ul#itemNumber a’).click(function(){
var curPos = $(this).parent().index();
console.log(curPos); $index()+1;
if ($index()+1 = null){ hide (nextbutton) else load (new index) on click}
});

load last item
$(‘ul#itemNumber a’).click(function(){
var curPos = $(this).parent().index();
console.log(curPos); $index()-1;
if ($index()-1 = null) {hide (prevbutton) else load (new index) on click}
});

I am very new to webflow and HTML code at large and have no idea how to do this. I would really appreciate some help.