WordPress pagination counter not working correctly

I am currently learning wordpress development.

I would like to create a custom pagination for my blog posts, since the ones offered by wordpress lack design and are frankly boring.

This is how I want it to look like:

This is how it should function:
https://codepen.io/krystyna93/pen/oNLNjrM

I will post what code I have so far. The code has some bugs that I cant work out. Although the arrows are there, they dont display and throws a NaN/undefined error text. I am not sure how to correspond the counter to the number of blog posts there are (should be two) to wordpress.

THIS GOES IN FUNCTIONS
function paginate_counter()
    {
        global $wp_query, $wp_rewrite;
        $wp_query->query_vars['paged'] > 1 ? $current = $wp_query->query_vars['paged'] : $current = 1;
        $pagination = array(
            'base' => @add_query_arg('page', '%#%'),
            'format' => '',
            'total' => $wp_query->max_num_pages,
            'current' => $current,
            'show_all' => false,
            'end_size' => 0,
            'mid_size' => 0,
            'type' => 'list'
        );
        if ($wp_rewrite->using_permalinks()) $pagination['base'] = user_trailingslashit(trailingslashit(remove_query_arg('s', get_pagenum_link(1))) . 'page/%#%/', 'paged');
        if (!empty($wp_query->query_vars['s'])) $pagination['add_args'] = array('s' => get_query_var('s'));


        $prev = get_previous_posts_link();
        $next = get_next_posts_link();
        ?>
        <div class="paginate">
            <button class="paginate left" alt="older posts" title="older posts">
                <?php $prev = get_previous_posts_link('<span></span><span></span>'); ?>
            </button>

            <?php
            $links = paginate_links($pagination);
            $links = "<div class='counter'>$prev $current / $wp_query->max_num_pages</div> $next";
            echo $links;
            ?>

            <button class="paginate right" alt="newer posts" title="newer posts">
                <?php $next = get_next_posts_link('<span></span><span></span>'); ?>
            </button>
        </div>
        <?php
    }

THIS GOES IN INDEX
<?php paginate_counter(); 

THIS IS THE JQUERY
// pagination
        var paginate_left = document.querySelector('.paginate.left');
        var paginate_right = document.querySelector('.paginate.right');
    
        paginate_left.onclick = slide.bind(this, -1);
        paginate_right.onclick = slide.bind(this, 1);
    
        var index = 0, total = $wp_query(max_num_pages);
    
        function slide(offset) {
            index = Math.min(Math.max(index + offset, 0), total - 1);
            document.querySelector('.counter').innerHTML = (index + 1) + ' / ' + total;
    
            paginate_left.setAttribute('data-state', index === 0 ? 'disabled' : '');
            paginate_right.setAttribute('data-state', index === total - 1 ? 'disabled' : '');
        }
        slide(0);