How to add and remove an icon with jQuery

I am trying to make a toggle button work to add and remove a featured star. I am doing this in jQuery. Below I am including the HTML, jQuery and CSS Code

//Toggling Favorites on and off         
$("#flexSwitchCheckChecked, label[for='flexSwitchCheckChecked']").click(function() {
    var toggleText = $(this).text() == 'Hide Featured' ? 'Show Featured' : 'Hide Featured';
    $(this).text(toggleText);

    if ($('td i.fa-star').hasClass('fa-star')) {
        $('td i.fa-star').addClass('hideFeatured')

    } else if ($('td i.hideFeatured').hasClass('hideFeatured')) {
        $(this).addClass('showFeature')
    }
})
//End of Toggling Favorites on and off     

<td class="align-middle" data-uw-styling-context="true">
   <a class="mx-2 blue-text" href="https://www.facebook.com/BrowardCountyGovernment/" type="button" target="_blank">
   <i class="fab fa-2x fa-facebook" aria-hidden="true" data-uw-styling-context="true"></i></a>
   <a class="mx-2 light-blue-text" href="https://twitter.com/browardcounty" type="button" target="_blank">
   <i class="fab fa-2x fa-twitter" aria-hidden="true" data-uw-styling-context="true"></i></a>
   <a class="mx-2 red-text" href="http://https://www.youtube.com/channel/UCkFUpAuNegNExxOKo_5KJ6w/videos" type="button" target="_blank">
   <span class="my-auto my-lg-0 fa-layers fa-fw mr-2" data-uw-styling-context="true">
   <i class="fab fa-2x fa-youtube" aria-hidden="true" data-uw-styling-context="true"></i>
   <i class="fas fa-1x fa-star" style="color:#fbc02d" data-fa-transform="shrink-2 up-8 left-8" aria-hidden="true" data-uw-styling-context="true"></i>
   </span></a>
   <a class="mx-2 text-secondary" href="https://www.instagram.com/browardcountylife/" type="button" target="_blank">
   <i class="fab fa-2x fa-instagram" aria-hidden="true" data-uw-styling-context="true"></i></a>
</td>

.hideFeatured {
    display: none;
}

.showFeatured {
    display: inline-block;
    
}