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" data-icon="fa-info-circle"></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" data-icon="fa-heartbeat"></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

// jQuery safety
(function($) {

  // DOM ready
  $(function() {

    // icons
    var $icons = $('.faq-links');
    $icons.on('click', function(e) {

      // variables
      var $this = $(this);
      var $icon = $this.find('i');

      // iconName taken from data-icon attribute
      var iconName = $icon.data('icon');

      // close icon
      var closeIconName = 'fa-times';

      // prevent default browser behaviour, just in case
      e.preventDefault();

      // handle state
      if ($icon.hasClass(closeIconName)) {
        $icon.removeClass(closeIconName).addClass(iconName);
      } else {
        $icon.addClass(closeIconName).removeClass(iconName);
      };
    });
  });
})(jQuery);