数据切换合并不会在引导程序中显示正确的目标

Question

我在tr进行了数据切换，一旦点击，基础tr将显示在所有tr的最后一部分中。示例：如果我单击名称John，其对应的tr <td>test2</td>将显示在最后一部分。让我们说，它将显示在Genrevel下。我的javascript出了什么问题？

$(function() {
  $("#example1").DataTable();

});

<link rel="stylesheet" href="https://adminlte.io/themes/AdminLTE/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="https://adminlte.io/themes/AdminLTE/plugins/datatables/dataTables.bootstrap.css">

<table id="example1" class="table table-bordered" style="border-collapse:collapse;">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Level</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><a data-toggle="collapse" data-parent="#accordion" href="#accordionOne"> Joseph</a></td>
      <td>15</td>
      <td>8</td>
    </tr>
    <tr id="demo1" class="accordian-body collapse">
      <td>test 1</td>
      <td>test 1</td>
      <td>test 1</td>
    </tr>
    <tr>
      <td><a data-toggle="collapse" data-parent="#accordion" href="#accordionOne"> John</a></td>
      <td>12</td>
      <td>6</td>
    </tr>
    <tr id="accordionOne" class="panel-collapse collapse">
      <td>test 2</td>
      <td>test 2</td>
      <td>test 2</td>
    </tr>
    <tr>
      <td><a data-toggle="collapse" data-parent="#accordion" href="#accordionTwo"> Genrevel</a></td>
      <td>10</td>
      <td>5</td>
    </tr>
    <tr id="accordionTwo" class="panel-collapse collapse">
      <td>test 3</td>
      <td>test 3</td>
      <td>test 3</td>
    </tr>
  </tbody>
</table>


<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script src="https://adminlte.io/themes/AdminLTE/plugins/datatables/jquery.dataTables.min.js"></script>
<script src="https://adminlte.io/themes/AdminLTE/plugins/datatables/dataTables.bootstrap.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>