Recarregando com AJAX e JSP

Front-end
, , , ,
#1

Tenho um site em que tenho um menu com uma lista de opções de produto. E quando o usuário for clicar em um dos produtos, eu quero que o nome produto selecionado fique destacado (com cor vermelha) e carregue as informações daquele produto, com imagens e etc em uma outra parte do site.
Bom, isso eu consigo fazer.
O problema é quando eu vou selecionar outro produto. Aí vai mostrar o nome dos dois produtos destacados, sendo que o usuário está apenas em um. Como eu tiro o CSS do produto anterior, deixando apenas no selecionado?

Segue o código:

// Adesivo 30x30mm

$(document).ready(function() {	

	$('#AVB30x30').click(function() {

		$("#AVB30x30").css("color", "red");
		$("#AVB30x30").css("font-weight", "bold");
		$.ajax({
			type : 'POST',
			url : 'Select.jsp',
			data : {
				select : 'AVB30x30'
			},

			success : function(resultado) {
				$('#produto').html(resultado);
			}

		});
	});
});

// Adesivo 40x40mm
$(document).ready(function() {
	
	$('#AVB40x40').click(function() {
		$("#AVB40x40").css("color", "red");
		$("#AVB40x40").css("font-weight", "bold");

		$.ajax({
			type : 'POST',
			url : 'Select.jsp',
			data : {
				
				select : 'AVB40x40'
			},

			success : function(resultado) {
				$('#produto').html(resultado);
			}

		});
	});
});

Também tenho outra dúvida. Tenho uma div que contém vários elementos. Gostaria de saber se tem algum atalho pra fazer apenas um comando por produto, ou um pra todos… pois o código que mandei acima, está a fazer um por um. E são bastante produtos. Se alguém souber, eu peço por favor para me responder :grin:

                                            <!-- Adesivo Vinil Branco -->
					<button onclick="listaProduto('adesivoVinilBranco')" class="w3-block w3-left-align" style="border: none;">Vinil Branco</button>
					<div id="adesivoVinilBranco" class="w3-hide">
						<label id="AVB30x30">30x30 mm</label><br> 
						<label id="AVB40x40">40x40 mm</label><br>
						<label id="AVB50x50">50x50 mm</label><br>
						<label id="AVB70x70">70x70 mm</label><br>
						<label id="AVB90x90">90x90 mm</label><br> 
					</div>	
					<!-- Fim Adesivo Vinil Branco -->
#2 
Já consegui resolver, fiz dessa maneira:

var idProduto = null;
	$(function() {
		$('#menu-produtos div label').click(function() {
			if(idProduto!=null) {
				//Tirando css do produto anterior selecionado
				$("#"+idProduto).css("color", "");
				$("#"+idProduto).css("font-weight", "");
				// Pegando id selecionado
				idProduto = $(this).attr('id');
			} else {
				// Pegando id selecionado
				idProduto = $(this).attr('id');
			}
			
			
			// Ajax
					var id = $.ajax({
						type : 'POST',
						url : 'Select.jsp',
						data : {
							// Parametro para passar para a página Select.jsp para verificação
							select : idProduto
						},
						
						beforeSend: function(){
							$('#produto').html('<h1 align="center">Carregando...</h1>');
						},
						//Se der certo, fazer:
						success : function(resultado) {
							//Adicionar css no produto novo selecionado
							$("#"+idProduto).css("color", "red");
							$("#"+idProduto).css("font-weight", "bold");
							//Escrever o conteúdo html dentro do id #produto
							$('#produto').html(resultado);

						}

					});
			// Ajax
		});
	});