Manipulate list element with Jquery

Question

I would like a tip to make sure that when clicking on the list, it waves the correct question and nods the wrong one, or just the right one if the person got it right,

<div class="container">
<div class="row">
<div class="col-sm-12">
<h2>Simulado Detran – Prova Teórica com Gabarito e Respostas</h2>

<div class="questao">Questão</div>

<div class="pergunta"> <p>1&ordm; Pergunta do Simulado</p>
</div>

<div class="respostas">

<div class="list-group">
  <a href="#" class="list-group-item item1" id="1" onclick="recebeResposta( this.id )"><div class="icone"></div>Resposta 1 da Primeira Pergunta</a>
			
  <a href="#" class="list-group-item item2" id="2" id="item2" onclick="recebeResposta( this.id )"><div class="icone2"></div>Resposta 2 da Primeira  Pergunta</a>
  
  <a href="#" class="list-group-item item3" id="3" onclick="recebeResposta( this.id )"><div class="icone3"></div>Resposta 3 da Primeira Pergunta</a>
  
  <a href="#" class="list-group-item item4" id="4" onclick="recebeResposta( this.id )"><div class="icone4"></div>Resposta 4 da Primeira Pergunta</a> <input type="hidden" name="resposta" id="resposta" value="4" />
</div>

<script>
//$(".list-group-item").click(function() {
//$('.item3').addClass('list-group-item-success');
//});
var qtdCarrinho = $("#resposta").val();
//alert(qtdCarrinho);

function recebeResposta(id){
	
	$('this.id').addClass('list-group-item-success');
}
</script>


</div>
</div>

Answer 1

This answer is a functional model, you can customize it however you want:

Obs.: created a class .list-group-item-error as an example just to style the wrong items.

var qtdCarrinho = $("#resposta").val();

function recebeResposta(id){
	if(qtdCarrinho == id){
		alert("Resposta Correta!");
		$("#"+id).addClass('list-group-item-success');
	}else{
		alert("Você errou!\nA resposta correta é a "+qtdCarrinho);
		$(".list-group-item:not(.list-group-item[id="+qtdCarrinho+"])").addClass("list-group-item-error");
		$(".list-group-item[id="+qtdCarrinho+"]").addClass("list-group-item-success");
	}
  }

.list-group-item-error{
 color: #ddd;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<div class="container">
<div class="row">
<div class="col-sm-12">
<h2>Simulado Detran – Prova Teórica com Gabarito e Respostas</h2>

<div class="questao">Questão</div>

<div class="pergunta"> <p>1&ordm; Pergunta do Simulado</p>
</div>

<div class="respostas">

<div class="list-group">
  <a href="#" class="list-group-item item1" id="1" onclick="recebeResposta( this.id )"><div class="icone"></div>Resposta 1 da Primeira Pergunta</a>
			
  <a href="#" class="list-group-item item2" id="2" id="item2" onclick="recebeResposta( this.id )"><div class="icone2"></div>Resposta 2 da Primeira  Pergunta</a>
  
  <a href="#" class="list-group-item item3" id="3" onclick="recebeResposta( this.id )"><div class="icone3"></div>Resposta 3 da Primeira Pergunta</a>
  
  <a href="#" class="list-group-item item4" id="4" onclick="recebeResposta( this.id )"><div class="icone4"></div>Resposta 4 da Primeira Pergunta</a> <input type="hidden" name="resposta" id="resposta" value="4" />
</div>