как изменить стиль шрифта при нажатии на иконку

В моем приложении у меня есть значки, а под значками я ввел числа. Поэтому мое требование заключается в том, что когда мы нажимаем на значок, конкретный номер под значком должен быть выделен жирным шрифтом.

< Сильный > .component.html

<div class="container">
<span class="iconss"></span><i  class="stl icon icon-onlife-smiley-face-1"></i>
  <span class="iconss"></span><i  class="stl icon icon-onlife-face-2"></i>
  <span class="iconss"></span><i  class="stl icon icon-onlife-face-3"></i>
  <span class="iconss"></span><i  class="stl icon  icon-onlife-face-4"></i>
  <span class="iconss"></span><i  class="stl icon icon-onlife-face-5"></i>
  <span class="iconss"></span><i  class="stl icon icon-onlife-face-6"></i>
  </div>

.component.css

.stl{
 
  font-size:35px;
  display:inline-block;

}
.iconss{
  position: relative;
  left: 22px;
  top: 20px;
}
.iconss:after{
  content: counter(number);
  counter-increment: number;
}
.iconss.active{
  font-weight: bold;
}

.stl.active {
  
  color: yellow;
}

component.ts

$(".stl").click(function() {
      $(".stl").removeClass("active");
      

      $(this).addClass("active");
})

Я пробовал с помощью метода ниже, но не работает

 $(".stl").click(function() {
     
  $(".iconss").addClass("active");
      
   $(this).addClass("active");
   });

Может ли кто-нибудь помочь мне в этом же.