JQuery Toggle icon with a variety of different icons issue

I am currently trying to set up a menu with a icon toggle, so when one icon is clicked it changes to a cross and then when that cross is clicked it changes back to the original. I have got that far, but when I click a new image I want the old icon to reset and the cross to be applied to the new icon.

This is how far I have got:

<div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingFive">
        <a class="collapsed faq-links">
            <i id="icon" class="fa fa-info-circle fa-3x"></i>
        </a>
    </div>
</div>
<br />
<div class="panel panel-default">
    <div class="panel-heading" role="tab" id="heading13">
        <a class="collapsed faq-links">
            <i id="icon" class="fa fa-heartbeat fa-3x"></i>
        </a>
    </div>       
</div>
<br />
<div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingFour">
        <a class="collapsed faq-links" >
            <i id="icon" class="fa fa-comments fa-3x"></i>
        </a>
    </div>
</div>

Javascript:

$('.faq-links').click(function(){
    var collapsed=$(this).find('i').hasClass('fa-info-circle');
    $('.faq-links').find('i').removeClass('fa-times');
    $('.faq-links').find('i').addClass('fa-info-circle');
    if(collapsed)
        $(this).find('i').toggleClass('fa-info-circle fa-3x fa-times fa-3x')
});

I've set up a JSFiddle to show it working https://jsfiddle.net/BenjiBaird/yycf2jb8/1/

So when I click on info-circle the cross is applied and when I click on another that cross is removed. How do I go about applying this so every icon.

Any help would be appreciated, hope I made myself clear.

If you add a data attribute to the anchor tags with the specific icon class name like so

<a class="collapsed faq-links" data-icon-name="fa-info-circle">
  <i id="icon" class="fa fa-info-circle fa-3x"></i>
</a>

You can use that attribute to toggle the icons between the 'fa-times' and the original one

Have a look at the code below and the JSFiddle to see how it works. Also there are inefficiencies in the code namely in the constantly using .find('i') but i'll leave it up to you to come up with a solution for that.

$('.faq-links').click(function() {
  if ($(this).find('i').hasClass('fa-times')) { //then change back to the original one
    $(this).find('i').removeClass('fa-times').addClass($(this).data('icon-name'));
  } else {
    $('.faq-links').each(function(){ //Remove the cross from all other icons
        if($(this).find('i').hasClass('fa-times')) {
        $(this).find('i').removeClass('fa-times').addClass($(this).data('icon-name'));
      }
    });
    $(this).find('i').addClass('fa-times').removeClass($(this).data('icon-name'));
  }
}); 

The Fiddle is here