Variable gone rogue!

I am baffled by this issue. I’m using jQuery and a bit of its AJAX functionality. Here’s the code:


$('.remove-item').live('click', function(){

        //get line-item context for removal after item is successfully deleted
        var lineItem = $(this).parent();

        //keep link context and its inner html in case deletion fails
        var removeLink = this;
        var linkInner = $(removeLink).html();

        //replace icon with loading gif
        $(this).html('<img id="loading" alt="loading..." title="Loading..." src="images/loading.gif" />');

        //get item ID to send to server
        var itemID = $(this).attr('alt');

        //keep product number for utility purposes
        var productNumber = $(this).next().text(); console.log(productNumber); //LOG

        //need product ID and series name to rebuild "Hold item" link should a product be removed while on a product page
        if ($('#product-left-col').length == 0) {
            var productID = $('.product-info[name="' +productNumber+ '"]').attr('alt'); console.log(productID);//LOG
            var series = $(this).attr('name');
        }

        $.post('ajax/ajax.products.php', {"action":"removeItem", "itemID":itemID}, function(data){

            if (data == "success") {
                $(lineItem).detach();

                //update item count on page
                modifyItemCount(-1);

                //replace "item held" with link to hold the item if on products page; first need the starting href to build new href 
                if ($('#product-left-col').length == 0) { console.log('left-col length 0, prodID: '+productID);//LOG
                    var href = $('a[title="Hold this item"]:first').attr('href');
                    var preHref = href.substring(0,href.indexOf('?'));
                    var newHref = preHref+ '?series=' +series+ '&holdPID=' +productID;
                    $('.product-info[name="' +productNumber+ '"] > .held').replaceWith('<a target="_self" name="' +productID+ '" title="Hold this item" href="' +newHref+ '">Hold this item</a>');
                } else if ($('.held').length > 0 && productNumber == $('input[name="productNumber"]').val()) {
                    var productID = $('input[name="productID"]').val();
                    $('.held').replaceWith('<a target="_self" title="Hold This Item" name="' +productID+ '">HOLD THIS ITEM</a>');
                }

            } else {
                $(removeLink).html(linkInner);
                alert('Sorry, there was an error that prevented removing this item from your list of items.  If the problem persists, please contactus by visiting our contact page. ');
            }

        });

        //so link doesn't refresh page
        return false;

    });

I am using Firebug in Firefox to help with debugging, and so you’ll notice I have three console.log references in my code. The first two output EXACTLY what I expect them to. In the conditional where both series and productID are first defined, they are defined exactly the same way. However, once in the callback function of the AJAX request, series has retained its value but productID is all of a sudden undefined!! I can’t for the life of me figure it out. I tried to delete the “var” declarion when first initializing productID to make to global but it had no effect.

Can anyone see what I’m missing?!