<ul class="top-models__list-pros">
  <li class="pros">
    <div class="icon icon--pros"><span class="sign"></span></div>
    <div class="text" style="display: none;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ullamcorper, velit vitae lacinia tristique, diam neque tincidunt sapien</div>
  </li>
  <li class="cons cons--active">
    <div class="icon icon--cons"><span class="sign"></span></div>
    <div class="text" style="display: none;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ullamcorper, velit vitae lacinia tristique</div>
  </li>
  <li class="recomend">
    <div class="icon icon--recomend icon--active"><span class="sign"></span></div>
    <div class="text" style="display: inline-block;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ullamcorper, velit vitae lacinia tristique, diam neque tincidunt sapien</div>
  </li>
</ul>

$( document ).ready( () => {
    $('ul.top-models__list-pros > li').each(function() {
        $(this).find('div.icon').each(function() {
            $(this).on('click', function() {
                $(this).addClass('icon--active')
                    .closest('li')
                    .siblings()
                    .find('.icon')
                    .removeClass('icon--active');
            });
        });
    });
});

$(() => {
    $('ul.top-models__list-pros > li div.icon').click(function() {
        $(this).addClass('icon--active')
            .closest('li')
            .siblings()
            .find('.icon--active')
            .removeClass('icon--active');

    });
});

$(() => {
    let temp = $('ul.top-models__list-pros .icon--active');
    $('ul.top-models__list-pros').on('click', '.icon', function(){
      temp.removeClass('icon--active');
      temp = $(this).addClass('icon--active');
    });
});