JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.css">
<div class="panel-heading">
Panel Heading
</div><!-- /.panel-heading-->
<div class="panel-collapse collapse">
    Panel Collapse with a just a collapse
</div><!-- /.panel-collapse -->
<br><br>
<div class="panel-heading">
Panel Heading
</div><!-- /.panel-heading-->
<div class="panel-collapse collapse in">
    Panel Collapse with collapse &amp; in 
</div><!-- /.panel-collapse -->

CSS

.panel-heading{
    height: 30px;
    border: 1px solid #ddd;
    padding: 5px;
}

JavaScript

$( ".panel-heading + .collapse:not(.in)" ).prev().append( "<i class='fa fa-plus'></i>" );
$( ".panel-heading + .collapse.in" ).prev().append( "<i class='fa fa-minus'></i>" );