$(document).ready(function() {
	if ($('.TO, .DT, .IN, .WDT, .WP, .MD, .PRP, .CC').click(function() {
		$('.TO, .DT, .IN, .WDT, .WP, .MD, .PRP, .CC').toggleClass('hide'); // reset
	}));

	else ($('span').click(
	function(){
		var selectedclass = $(this).attr('class');
		$('span').css('background-color', 'white').css('color','black'); // reset
		$('span.' + selectedclass).css('background-color', '#FF4500').css('color', 'white'); //highlighting the select
	}));
})






final code
$(document).ready(function(){
	$('.TO, .DT, .IN .WDT, .WP, .MD, .PRP, .CC').click(
	function() {
		$('.TO, .DT, .IN .WDT, .WP, .MD, .PRP, .CC').css('color','black'); // reset
		$('.TO, .DT, .IN .WDT, .WP, .MD, .PRP, .CC').css('color', 'white');
	});
})





$(document).ready(function(){
	$('span').click(
	function(){
		var selectedclass = $(this).attr('class');
		$('span').css('background-color', 'white').css('color','black'); // reset
		$('span.' + selectedclass).css('background-color', '#FF4500').css('color', 'white'); //highlighting the select
	});
})





same: 
$(document).ready(function() {
	if ($('.TO, .DT, .IN, .WDT, .WP, .MD, .PRP, .CC').click(
	function() {
		$('.TO, .DT, .IN, .WDT, .WP, .MD, .PRP, .CC').toggleClass('hide'); // reset
	}));
})