gistfile1.js

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

// Click from a list of available touchpoints to create a user-selected list of touchpoints.
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><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.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 () {
		$('#tpList li').each(function(index) {
			var oldnum = $(this).find('.tp-number').html(),
				newNum = index + 1;
			$(this).oldnum.replaceWith(newNum);
			//alert('old number: ' + oldnum + ', new number: ' + newNum);
		});
	}
	
});