gistfile1.js

var availableTPs = $('#availableTPs a'),
tpList = $('#tpList'),
currentTPs = $('#tpList a');

// Set click event on the list of available touchpoints and run methods when an item on that list is clicked.
availableTPs.on('click', function(event){
    var clickedTPLabel = $(this).children('span').html(),
    tpListLength = countTPs(),
    newTPMarkup = createNewTP();
    
    createNewTP(clickedTPLabel, tpListLength);
    appendNewTP(newTPMarkup);
    
    // Count the number of li's.
    function countTPs() {
        var currentTPListLength = $('#tpList li').length;
        return currentTPListLength;
    };
    
    // Create the markup for the new li.
    function createNewTP() {
        var tpLabel = clickedTPLabel,
        tpNumber = tpListLength + 1,
        newTP = '<li class="added"><a href="#"><span class="tp-number">' + tpNumber + '</span><span class="tp-label">' + tpLabel + '</span><i class="icon icon-remove-sign"></i></a></li>';
        return newTP;
    };
    
    // Append the new li to the list
    function appendNewTP() {
        var tpMarkup = newTPMarkup;
        $('#tpList li').fadeIn('slow', function() {
            // Animation complete
        });
        tpList.append(tpMarkup);
        // After the new li is added, attach an event handler to the anchor to remove the item when clicked.
        var anchor = tpList.find('li:last').find('a');
        anchor.on('click', function(event){
            $(this).parents('li').remove();
            renumberTPs();
        });
    };

    // When a TP is removed by the user, renumber the remaining list.
    function renumberTPs () {
        var list = $('#tpList');
        var items = list.children();
        console.debug(items);

        $.each(items, function (index, value) {
            var item = value;
            var oldNum = $(this).find('.tp-number').html();
            var newNum = (index + 1);
            
            $(this).find('.tp-number').html(newNum);

            //console.debug('item: ' + item, 'oldNum: ' + oldNum, 'newNum: ' + newNum);
        });
    }
    
});