I'm writing a code with accordion patters and I've run into issue where closing and opening one of them automatically closes the other one. I need all of them to stay opened until user clicks to close them. When one gets closed and reopened all of the others stay the same. To be more specific when closing and reopening the accordion named "Buy Type" the one named "Specs" automatically closes which I don't want to. I've provided the entire section in case I messed up something else that causes the issue. Also reopening "Design Guidelines" closes "Template instructions" etc.
<section id="specification" class="mt-5 pt-4">
<div class="container-fluid container-fluid-shorter">
<!--Accordion wrapper-->
<div class="accordion md-accordion accordion-1" id="accordionEx23" role="tablist">
<div class="card my-4">
<div class="card-header blue lighten-3 z-depth-1" role="tab" id="heading96">
<h4 class="text-capitalize mb-0 py-1">
<a class="text-black font-weight-light" data-toggle="collapse" href="#collapse96" aria-expanded="true"
aria-controls="collapse96">
buy type
</a>
</h4>
</div>
<div id="collapse96" class="collapse show" role="tabpanel" aria-labelledby="heading96"
data-parent="#accordionEx23">
<div class="card-body">
<div class="row">
<div class="col-md-8">
<h6 class="font-weight-light black-text text-grey mb-5">CPM, Sponsorship (Property Details Page - Suburb targeted only)</h6>
</div>
</div>
</div>
</div>
</div>
<!--End of buy type-->
<div class="card my-4">
<div class="card-header blue lighten-3 z-depth-1" role="tab" id="heading98">
<h4 class="text-capitalize mb-0 py-1">
<a class="text-black font-weight-light" data-toggle="collapse" href="#collapse98"
aria-expanded="false" aria-controls="collapse98">
specs
</a>
</h4>
</div>
<div id="collapse98" class="collapse show" role="tabpanel" aria-labelledby="heading98"
data-parent="#accordionEx23">
<div class="card-body">
<div class="row my-2">
<div class="col-md-12">
<ul>
<li><h6 class="font-weight-light text-grey mb-3">Logo: 500x88px, 10kb static JPEG or PNG, logo to be left aligned on a transparent white background.:</h6></li>
<li><h6 class="font-weight-light text-grey mb-3">Hero Image: 1200x676px, 100kb static JPEG or PNG, image must not contain any copy and cannot have a border around it.:</h6></li>
<li><h6 class="font-weight-light text-grey mb-3">Ad Copy: Two lines of text, up to 40 characters for each line. Second line of text will be seen on Desktop only.:</h6></li>
<li><h6 class="font-weight-light text-grey mb-3">Format: Static JPEG or PNG</h6></li>
<li><h6 class="font-weight-light text-grey mb-3">Looping: No</h6></li>
<li><h6 class="font-weight-light text-grey mb-3">3rd Party tracking: Allowed</h6></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="card my-4">
<div class="card-header blue lighten-3 z-depth-1" role="tab" id="heading99">
<h4 class="text-capitalize mb-0 py-1">
<a class="text-black font-weight-light" data-toggle="collapse" href="#collapse99"
aria-expanded="false" aria-controls="collapse99">
ad placement matrix
</a>
</h4>
</div>
<div id="collapse99" class="collapse-show" role="tabpanel" aria-labelledby="heading99"
data-parent="#accordionEx23">
<div class="card-body">
<div class="row my-4 bg-grey d-flex align-items-center justify-content-center">
<!--<div class="col-md-2">
<h6 class="font-weight-lighter">Reklamní jednotka</h6>
</div>
<div class="col-md-1">
<h6 class="font-weight-lighter text-capitalize">Koupě</h6>
</div>
<div class="col-md-1">
<h6 class="font-weight-lighter text-capitalize">Pronájem</h6>
</div>
<div class="col-md-1">
<h6 class="font-weight-lighter text-capitalize">Prodej</h6>
</div>
<div class="col-md-1">
<h6 class="font-weight-lighter text-capitalize">Novinky</h6>
</div>
<div class="col-md-1">
<h6 class="font-weight-lighter text-capitalize">Nápovědy</h6>
</div>
<div class="col-md-1">
<h6 class="font-weight-lighter text-capitalize">Životní styl</h6>
</div>
<div class="col-md-1">
<h6 class="font-weight-lighter text-capitalize">Video portál</h6>
</div>
<div class="col-md-1">
<h6 class="font-weight-lighter text-capitalize">Nalézaní agentů</h6>
</div>
<div class="col-md-1">
<h6 class="font-weight-lighter text-capitalize">Nové nabídky</h6>
</div>-->
</div>
</div>
</div>
</div>
<div class="card my-4">
<div class="card-header blue lighten-3 z-depth-1" role="tab" id="heading97">
<h4 class="text-capitalize mb-0 py-1">
<a class="text-black font-weight-light" data-toggle="collapse" href="#collapse97" aria-expanded="true"
aria-controls="collapse97">
template instructions
</a>
</h4>
</div>
<div id="collapse97" class="collapse show" role="tabpanel" aria-labelledby="heading97"
data-parent="#accordionEx23">
<div class="card-body">
<div class="row">
<div class="col-md-8">
<ul>
<li><h6 class="font-weight-light text-grey mb-3">Video: all videos must be progressive load. Must not exceed 40% of a user’s CPU. Cannot be streaming. Max video length 30 seconds.</h6></li>
<li><h6 class="font-weight-light text-grey mb-3">Video/Audio: no sound. Clicking ‘Unmute’ button turns the video into user-initiated. Regardless of the video length, control buttons (mute/unmute and pause/play) are required, as well as an indicator of the video duration or elapsed status. Except for the initial autoplay video, each video play must be user-initiated. Once Pause or Stop is clicked, there should be zero animation or video. All sound and animation must stop upon exit click. Animation must stop within 30 seconds after the interaction with it has ended.</h6></li>
<li><h6 class="font-weight-light text-grey mb-3">Fallback: all HTML5 ads must gracefully fallback to support basic HTML5 to ensure full functionality across all modern browsers. Flash fallback is not supported and Flash content is not permitted in HTML5 ads.</h6></li>
<li><h6 class="font-weight-light text-grey mb-3">Border and iFrame: must stay within iFrame and have black border of at least 1 pixel.</h6></li>
<li><h6 class="font-weight-light text-grey mb-3">Mouseover policy: minor animation on mouseover for informational or navigational purposes is allowed. Animation cannot be disruptive or detract from user experience or the overall site functionality. No user-initiated sound on mouseover. If user takes mouse off the ad, user initiated animation should stop within 1 second. If it’s a game-like functionality, game should pause (not revert). For cross screen buys on tablets and mobile, interaction should depend on taps, drag actions, swipes, and other touch screen interaction methods.</h6></li>
<li><h6 class="font-weight-light text-grey mb-3">Close button: no close button or collapse functionality should be included in the creative.</h6></li>
<li><h6 class="font-weight-light text-grey mb-3">All creatives: should contain a single exit URL. Cannot contain non-functioning buttons, such as controls for video or social media button.</h6></li>
<li><h6 class="font-weight-light text-grey mb-3">Animated GIFs not supported.</h6></li>
<li><h6 class="font-weight-light text-grey mb-3">We suggest that the back up image resemble, as closely as possible, the final end frame of the ad animation - taking into account the previously stated attributes to ensure consistency in the advertisers message and user experience.</h6></li>
<li><h6 class="font-weight-light text-grey mb-3">Exit URL: all URLs must be live when assets are submitted.</h6></li>
<li><h6 class="font-weight-light text-grey mb-3">Cannot mimic any Site experience, pages, designs, graphics or logos.</h6></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="card my-4">
<div class="card-header blue lighten-3 z-depth-1" role="tab" id="heading100">
<h4 class="text-capitalize mb-0 py-1">
<a class="text-black font-weight-light" data-toggle="collapse" href="#collapse100"
aria-expanded="false" aria-controls="collapse100">
design guidelines
</a>
</h4>
</div>
<div id="collapse100" class="collapse-show" role="tabpanel" aria-labelledby="heading100"
data-parent="#accordionEx23">
<div class="card-body">
<div class="row my-2">
<div class="col-md-12">
<ul>
<li><h6 class="font-weight-light text-grey mb-3">Creative must not aim to look like site content such as editorial or search results listings; As such, creative that uses components that are similar in look to realestate.com.au site content, such as the same image sizes, button styles, etc may be rejected.</h6></li>
<li><h6 class="font-weight-light text-grey mb-3">If the banner background colour is white and/or does not fill the entire space, please include a one pixel border of HEX Web Colour #CCCCCC.</h6></li>
<li><h6 class="font-weight-light text-grey mb-3">Creative must include a brand mark of the advertiser.</h6></li>
<li><h6 class="font-weight-light text-grey mb-3">Creative running in the BUY section must not contain the following phrases in their message or links – “mortgage calculator”, “home loan calculator”, “mortgage repayment calculator” or “how much can I borrow?”.</h6></li>
<li><h6 class="font-weight-light text-grey mb-3">Creative must be of quality i.e. acceptable image resolution and professional design standards.</h6></li>
<li><h6 class="font-weight-light text-grey mb-3">realestate.com.au reserves the right to remove or request amends to any creative which is deemed unsuitable for the site.</h6></li>
<li><h6 class="font-weight-light text-grey mb-3">realestate.com.au recommends a minimum of two (2) creatives in order to optimise performance effectively.</h6></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="card my-4">
<div class="card-header blue lighten-3 z-depth-1" role="tab" id="heading101">
<h4 class="text-capitalize mb-0 py-1">
<a class="text-black font-weight-light" data-toggle="collapse" href="#collapse101"
aria-expanded="false" aria-controls="collapse101">
timeline
</a>
</h4>
</div>
<div id="collapse101" class="collapse-show" role="tabpanel" aria-labelledby="heading101"
data-parent="#accordionEx23">
<div class="card-body">
<div class="row my-2">
<div class="col-md-12">
<h6 class="font-weight-lighter">Please allow 5 days for creative lead-time.</h6>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--Accordion wrapper-->
</section>
What am I doing wrong?