trouble reinitializing a jquery counter for a lightbox gallery

I am working on a counter for a jQuery lightbox. I figured out how to count the total number of element and identify the element that has the “active” class and use its index number. It increments properly when I navigate forward and backward.

Problem: When I escape the lightbox and click on another image to open it with the lightbox, the counter remembers the last number that was showing regardless of which image I click. I was able to erase the thing completely when I escape, but could not get it to fire again. I could not figure out how to replace that counter either with the new list item with an active class.

I started this project after watching the great tutorial at http://ift.tt/1zjijym and you can go there to immediately see their code and approach (HTML, CSS, & JS). Here is the basics of how I am approaching the counter. Do you have any suggestions on how to do this properly? I have hit a wall.

    if($(".lb_backdrop").length < 1)
    {

        //My attempt at a counter
        var lb_count = $('.lightbox li').length;
        var lb_place = $('.lightbox li.active').index()+1;

        var lb_backdrop = '<div class="lb_backdrop"></div>';
        var lb_canvas = '<div class="lb_canvas"></div>';
        var lb_title = '<span class="lb_title"></span>';
        var lb_previous = '<span class="lb_previous fa fa-caret-left"></span><span class="visibly-hidden">previous slide</span>';
        var lb_next = '<span class="lb_next fa fa-caret-right"></span><span class="visibly-hidden">next slide</span>';
        var lb_caption = '<div class="lb_caption">'+lb_title+'</div>';
        var lb_counter = '<div id="counter"><span class="current-place">'+lb_place+'</span> of <span id="total">'+lb_count+'</span></div>';
        var lb_controls = '<div class="lb_controls">'+lb_counter+lb_previous+lb_next+'</div>';
        var total_html = lb_backdrop+lb_canvas+lb_caption+lb_counter+lb_controls;

        $(total_html).appendTo("body");
    }

Here is the navigation code.

//Click based navigation
doc.on("click", ".lb_previous", function(){ navigate(-1) });
doc.on("click", ".lb_next", function(){ navigate(1) });
doc.on("click", ".lb_backdrop", function(){ navigate(0) });
doc.on("click", ".inactive", function(){ navigate(0) });

Here is how I have been adding to the total to increment the previous and next totals.

//Updates the counter for current place
doc.on("click", ".lb_previous", function(){
    var previousPlace = $('.lightbox li.active').index()+1;
    $(".current-place").text(previousPlace);
});
doc.on("click", ".lb_next", function(){
    var newPlace = $('.lightbox li.active').index()+1;
    $(".current-place").text(newPlace);
});

And here is how things were escaping beside the keyboard strokes.

//Navigation function
function navigate(direction)
{
    if(direction == -1) // left
        $(".lightbox li.active").prev().trigger("click");
    else if(direction == 1) //right
        $(".lightbox li.active").next().trigger("click");
    else if(direction == 0) //exit
    {
        $(".lightbox li.active").removeClass("active");
        $(".lb_canvas").removeClass("loading");
        //Fade out the lightbox elements
        $(".lb_backdrop, .lb_canvas, .lb_controls, .lb_caption").fadeOut("slow", function(){
        //empty canvas, counter and title
        $(".lb_canvas, .lb_counter, .lb_title").html("");
        })
        lb_loading= false;
    }
}

Your help would be appreciated and let me know if I need to paste anymore code examples here.