Cant make my Plus and Minus operate properly with buttons - html

Question

I'm trying to use a button in one accordion to expand the next (or another down the line), but the plus and minus sign on the right aren't working properly.
When you click the accordion headings themselves, the plus and minus signs work properly to show if an accordion has been expanded or not. However, it sometimes shows the wrong character after using the buttons inside the accordions.
I don't know enough about CSS yet to figure out why this is happening.
What's going wrong and how can I fix it?
.container {
margin-right: 5px;
margin-left: 5px;
display: inline;
}
.rapanel-group .rapanel-heading+.rapanel-collapse>.rapanel-body {
border: 1px solid #ddd;
}
.rapanel-group,
.rapanel-group .panel,
.rapanel-group .rapanel-heading,
.rapanel-group .rapanel-heading a,
.rapanel-group .rapanel-title,
.rapanel-group .rapanel-title a,
.rapanel-group .rapanel-body,
.rapanel-group .rapanel-group .rapanel-heading+.rapanel-collapse>.rapanel-body {
border-radius: 5px;
border: 0;
margin: 1px 0px 1px 0px;
background-color: #ededed;
}
.rapanel-text {
margin-left: 30px;
margin-right: 30px;
display: inline-block;
font-size: 15px;
}
.rapanel-group .rapanel-heading {
padding: 0px;
}
.rapanel-group .rapanel-heading a {
display: block;
background: #1998d5;
color: #ffffff;
padding: 10px;
text-decoration: none;
position: relative;
border-radius: 5px;
text-align: center;
}
.rapanel-group:hover .rapanel-heading a:hover {
background: #1777a9;
}
.rapanel-group .rapanel-heading a.collapsed {
background: #eeeeee;
color: #ffffff;
background: #1998d5;
text-align: center;
}
.rapanel-group .rapanel-heading a:after {
content: '-';
position: absolute;
right: 20px;
top: 5px;
font-size: 20px;
}
.rapanel-group .rapanel-heading a.collapsed:after {
content: '+';
}
.raabc {
position: absolute;
left: 20px;
}
.rapanel-group .rapanel-collapse {
margin-top: 0px !important;
}
.rapanel-group .rapanel-body {
background: #ededed;
padding: 5px;
}
.rapanel-group .rapanel {
background-color: transparent;
}
.rapanel-group .rapanel-body p:last-child,
.rapanel-group .rapanel-body ul:last-child,
.rapanel-group .rapanel-body ol:last-child {
margin-bottom: 0;
}
/*RA Button Section*/
.rabutton {
display: block;
position: relative;
width: 100%;
background: #ffffff;
border: 1px solid #1998d5;
color: #222222;
font-weight: 500;
font-size: 12px;
text-align: left;
padding: 6px 25px 6px 25px;
border-radius: 5px;
margin: 3px 1px 1px 0px;
}
.rabtnspan {
position: absolute;
color: #1997d5;
right: 10px;
top: 3px;
}
a.rabutton {
text-decoration: none;
}
a.rabutton:hover {
color: #222222;
background: #fffff0;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<div class="container">
<div class="rapanel-group" id="accordionappIssues140">
<div class="panel rapanel-default">
<div class="rapanel-heading">
<h4 class="rapanel-title"><a class="collapsed" data-toggle="collapse" data-parent="#accordionappIssues140" href="#collapseappIssues140OneA"><span class="raabc"></span><span class="rapanel-text">
a
</span></a></h4>
</div>
<div id="collapseappIssues140OneA" class="rapanel-collapse collapse">
<div class="rapanel-body">
<div class="ratooltip">
<a class="rabutton" data-toggle="collapse" data-parent="#accordionappIssues140" href="#collapseappIssues140TwoB"><span class="rabtnspan">➜</span>Button</a>
</div>
</div>
</div>
</div>
<div class="panel rapanel-default">
<div class="rapanel-heading">
<h4 class="rapanel-title"><a class="collapsed" data-toggle="collapse" data-parent="#accordionappIssues140" href="#collapseappIssues140TwoB"><span class="raabc"></span><span class="rapanel-text">
b
</span></a></h4>
</div>
<div id="collapseappIssues140TwoB" class="rapanel-collapse collapse">
<div class="rapanel-body">
<div class="ratooltip">
<a class="rabutton" data-toggle="collapse" data-parent="#accordionappIssues140" href="#collapseappIssues140ThreeC"><span class="rabtnspan">➜</span>Button</a>
</div>
</div>
</div>
</div>
<div class="panel rapanel-default">
<div class="rapanel-heading">
<h4 class="rapanel-title"><a class="collapsed" data-toggle="collapse" data-parent="#accordionappIssues140" href="#collapseappIssues140ThreeC"><span class="raabc"></span><span class="rapanel-text">
c
</span></a></h4>
</div>
<div id="collapseappIssues140ThreeC" class="rapanel-collapse collapse">
<div class="rapanel-body">
<div class="ratooltip">
<a class="rabutton" data-toggle="collapse" data-parent="#accordionappIssues140" href="#collapseappIssues140FourD"><span class="rabtnspan">➜</span>Button</a>
</div>
</div>
</div>
</div>
<div class="panel rapanel-default">
<div class="rapanel-heading">
<h4 class="rapanel-title"><a class="collapsed" data-toggle="collapse" data-parent="#accordionappIssues140" href="#collapseappIssues140FourD"><span class="raabc"></span><span class="rapanel-text">
d
</span></a></h4>
</div>
<div id="collapseappIssues140FourD" class="rapanel-collapse collapse">
<div class="rapanel-body">
<div class="ratooltip">
<a class="rabutton" data-toggle="collapse" data-parent="#accordionappIssues140" href="#collapseappIssues140FiveE"><span class="rabtnspan">➜</span>Button</a>
</div>
</div>
</div>
</div>
<div class="panel rapanel-default">
<div class="rapanel-heading">
<h4 class="rapanel-title"><a class="collapsed" data-toggle="collapse" data-parent="#accordionappIssues140" href="#collapseappIssues140FiveE"><span class="raabc"></span><span class="rapanel-text">
e
</span></a></h4>
</div>
<div id="collapseappIssues140FiveE" class="rapanel-collapse collapse">
<div class="rapanel-body">
<div class="ratooltip">
<a class="rabutton" data-toggle="collapse" data-parent="#accordionappIssues140" href="#collapseappIssues140OneA"><span class="rabtnspan">➜</span>Button</a>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
View on JSFiddle