JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://use.fontawesome.com/d2b3f19e0e.js"></script>
<div class="panel panel-default">
		        <div class="panel-heading" role="tab" id="headingFive">
		            <a class="collapsed faq-links" data-icon-name="fa-info-circle">
		            <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 hearbeat" data-icon-name="fa-heartbeat">
		            <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" data-icon-name="fa-comments">
		            	<i id="icon" class="fa fa-comments fa-3x"></i></a>
		        </div>
		    </div>

CSS

.fa-plus-square-o {
vertical-align: middle;
}
.fa-minus-square-o {
vertical-align: middle;
}
a.faq-links {
font-size: 20px;
}
.faq-links:hover {
text-decoration: none;
}
.faq-links:focus {
text-decoration: none;
}

JavaScript

$('.faq-links').click(function() {
  //Remove the icon class
  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 {
    //Remove the cross from all other icons
    $('.faq-links').each(function(){
    	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'));
  }
});