Remover classe de todos os outro elementos, menos o clicado

Estou criando uma tabela com filtro na própria <thead> e preciso que quando eu clique em um <th> ele adicione uma classe css somente ao <i> dentro da <th> clicada.

	Essa parte está funcionando, o meu problema é que ao clicar em um <th> eu preciso que a mesma classe adicionada ao <i> dentro dela, seja retirada dos <i> que estão dentro das outras, e não estou conseguindo fazer isso

	 

	Código da tabela

<thead id="orderFilter">
 <tr>
 <th id="orderMusica">Música<i class="fa fa-caret-down fa-pull-right transition-all"></i></th>
 <th id="orderArtista">Artista/Banda<i class="fa fa-caret-down fa-pull-right ml-4 transition-all"></i></th>
 <th id="orderView" colspan="2">Views<i class="fa fa-caret-down fa-pull-right ml-4 transition-all"></i></th>
 <th>&nbsp;</th>
 </tr>
</thead>

	 

	Função jQuery

$(document).on("click", "#orderFilter th", function(){
 $(".fa-caret-down").removeClass('fa-rotate--180');
 $(this).children('.fa-caret-down').toggleClass('fa-rotate--180');
});

	Tentei do jeito que está na função, mas como a linha 

$(".fa-caret-down").removeClass('fa-rotate--180');

	está sempre removendo a classe, o .toggleClass() ao invés de ficar adicionando e tirando a classe, está sempre adicionando.

	 

	Se eu clico em outra <th> funciona perfeitamente, mas se clico na mesma a classe é removida, e adicionada logo em seguida e não faz alteração alguma