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">
		            <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>

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(){

		    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')
		});