jquery - Toggle arrow only for currently selected table header -

how can target selected table header (just color changes selected header), arrow next 1 toggled rotate on click?

<table class="container cf">   <thead class="cf">     <tr>       <th class="numeric">amount <i class="glyphicon glyphicon-triangle-bottom"></i></th>       <th class="numeric">case <i class="glyphicon glyphicon-triangle-bottom"></i></th>       <th class="numeric">field 3 <i class="glyphicon glyphicon-triangle-bottom"></i></th>       <th class="numeric">field 4 <i class="glyphicon glyphicon-triangle-bottom"></i></th>       <th class="numeric">location <i class="glyphicon glyphicon-triangle-bottom"></i></th>       <th class="numeric">date <i class="glyphicon glyphicon-triangle-bottom"></i></th>     </tr>   </thead>   <tbody class="verdicts">     <tr>       <td data-title="amount" class="amount">8,570,000.00<span class="result"></span></td>       <td data-title="case">title</td>       <td data-title="practice area">area</td>       <td data-title="user">bob jones</td>       <td data-title="location">orlando, fl</td>       <td data-title="date">mar 6, 2017</td>     </tr>     <tr>       <td data-title="amount" class="amount">$447,115<span class="result"></span></td>       <td data-title="case">another title</td>       <td data-title="practice area">area</td>       <td data-title="user">joe smith</td>       <td data-title="location">orlando, fl</td>       <td data-title="date">mar 6, 2017</td>     </tr>   </tbody> </table> 

jquery

$(".numeric").click(function() {   $(".numeric").removeclass('numeric-active');   $(this).toggleclass("numeric-active");   $(".glyphicon-triangle-bottom").toggleclass("rotate"); }); 

jsfiddle: link

try following code

$(".numeric").click(function() {   $(".numeric").removeclass('numeric-active');   $(this).toggleclass("numeric-active");   $(this).find('i').toggleclass("rotate"); }); 

here working jsfiddle:https://jsfiddle.net/mrdag8bk/8/