Reload ajax content with jQuery

Question

I'm using the following to load some content from a page into a simple lightbox.

It works great, however, with more than one link on a page with class="ajax-page-content" , clicking link A load Content A, but clicking link B loads Content A also.

How Do I ensure the correct content is loaded for each link?

Do I need to use location.reload or something to reload the content?

$('.ajax-page-content').click(function(){  

    var $button = $(this);
    var url = $button.attr('href');

    if ($('#addlee-lightbox-content').length > 0) {

        $('#addlee-lightbox-content').show();
        $('body').addClass('lightbox-open');
    } else {
        $.get(url, '', function (data) {

            var $content = $(data).find('.col');
            var html_content = $content.html();

            var lightbox =
            '<div id="lightboxcontent">' +
                '<div class="lightbox-content animated fadeInDown">' +
                    '<a href="#" class="lightbox-close">&nbsp;</a>' +
                    html_content +
                '</div>' +
                '<div class="lightbox-bg">&nbsp;</div>' +
            '</div>';

            $('body').append(lightbox).addClass('lightbox-open');

        });
    }

    return false;
});

Answer 1

The error occurs because of your logic in script.
You write something like:

If container exist, show it
else, create container, populate it, show it

So, in your second click, the first condition executes.

Edit: an sketch of the logic should be like:

click link - fetch ajax data
populate container wth ajax data
show modal

An alteration is to use the click event to add (and populate) multiple containers to your page. Each container should hold the ajax data of a single click.
So something like:
click on LinkA, fetch dataA, populate containerA, open modalA
click on LinkB, fetch dataB, populate containerB, open modalB
click on LinkA, open modalA