Bootstrap collapse inside collapse

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<html>
<head>
<!--   <link rel="stylesheet" href="https://bootswatch.com/4/yeti/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> -->
<style>
.collapse.in {
  display: block;
  }
	.modal-dialog {z-index: 2050;}
</style>
</head>
<body>
<div class="container">

<h1>Reports & Conclusion</h1>

<div class="row">
<div class="col-lg-6">
<div class=" text-white bg-info mb-3" style="max-width: 20rem;" >
  <div class="card-header">Workaround Details</div>
  <div class="card-body">
    <h4 class="card-title">Workaround Name</h4>
    <p class="card-text">WA Id : Empty</p>
	<p class="card-text">Input : Empty</p>
	<p class="card-text">Output : Empty</p>
	<p class="card-text">ClientId : Empty</p>
	<p class="card-text">Client Name : Empty</p>
	</div>	
</div>
</div>
<span id="piechart" style="float:right;"></span>
</div>


  <div class="jumbotron">
			<div class="accordion" id="accordion2">
				
					
							
							
								<div class="accordion-group">
								    <div class="accordion-heading">
								      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapse0">
								       <h2>20181203161448WA370088AuditReport.xlsx</h2>
								      </a>
								    </div>
								    <div id="collapse0" class="accordion-body collapse">
								      <div class="accordion-inner">
								
								
								        <!--ACCORDION INSIDE ACCORDION ITEM TWO-->
								        <div class="accordion"...