Create AJAX tabs in admin options page from custom post type loop

For a WordPress crm/password management plugin I am working on, I have created a custom post type called 'client'. I also have made a separate menu page for storing and showing the passwords of these clients (like an options page, just not used for managing options).

What I would like to do is make a loop of the client post type, and outputting a tab for each client with the password-forms. So when I make a new client post, a tab for that client is being added to the password-page.

The tabs content should load via Ajax, so the page doesn't need to refresh. The layout of the tabs also should be the 'standard wordpress way' of displaying tabs in the admin (but restyled with css).

The problem I am facing is that When I click a tab, the whole admin page loads inside the div where only the content (forms) of the posts should load.

This is my page layout:

<div class="password-manager-panel-content">

        <?php

            // Loop through Clients custom post type and make a tab for each client
            echo '<h2 class="nav-tab-wrapper">';

                $args = array(
                    'post_type' => 'client',
                    'post_status' => 'publish',
                    'hide_empty'=> 1,
                    'posts_per_page' => -1,
                    'orderby' => 'name',
                    'order' => 'ASC'
                );

                $clients = new WP_Query( $args );

                if ( $clients -> have_posts() ) {
                    while ( $clients->have_posts() ) : $clients->the_post(); 
                    echo 
                        '<a class="nav-tab" href="?page=password-manager">';    
                                the_title();
                    echo '</a>';
                    endwhile;
                }

            echo '</h2>';

            echo '<div class="password-manager-tab-content">';

                // The actual content should be loaded inside this div              
                echo '<div class="tab-pane" id="ajax-content">';

                    $the_query = new WP_Query(array(
                        'post_type' => 'client',
                        'posts_per_page' => -1,
                        //'post_name' => $client->slug
                    ));

                    while ( $the_query->have_posts() ) : 
                    $the_query->the_post();

                            echo '<div class="password-manager-tab-header password-manager-row">';
                                the_title();
                            echo '</div>';  
                            echo '<div class="password-manager-row">';

                               // The content will be replaced with ACF Forms
                               the_content();

                            echo '</div>';

                    endwhile;

                echo '</div>';

            echo '</div>';

        ?>

    </div>

My jQuery / Ajax:

$(document).ready(function() {

    $.ajaxSetup({cache:false});
    $("a.nav-tab").click(function() {
        var post_link = $(this).attr("href");
        var post_id = $(this).attr("rel");

        $("#ajax-content").html("content loading");
        $("#ajax-content").load(post_link);

        $("a.nav-tab").removeClass('nav-tab-active');
        $(this).addClass('nav-tab-active');

        return false;       
    });
});

How can I make sure that the right content (tab content) is loaded via Ajax in the right place, and not loading the entire page again in the div?

via Chebli Mohamed