title: Open Every nested Tr element at the without closing the other
body: <p>I've get request the api in the nested table when you click on the TR element the nested table comes below that.
  When I click another tr the data came from the in tr goes into the upper one and make the data same 
  This is my table view </p>
  
  <pre><code>&lt;thead&gt;
     &lt;tr&gt;
        &lt;th&gt;#&lt;/th&gt;
        &lt;th&gt;Paper Board&lt;/th&gt;
        &lt;th&gt;
           &lt;div class="row"&gt;
              &lt;div class="col-md-8 text-center"&gt;Openings&lt;/div&gt;
           &lt;/div&gt;
           &lt;div class="row"&gt;
              &lt;div class="col-md-4 text-center"&gt;Reams&lt;/div&gt;
              &lt;div class="col-md-4 text-center"&gt;sheets&lt;/div&gt;
           &lt;/div&gt;
        &lt;/th&gt;
        &lt;th&gt;
           &lt;div class="row"&gt;
              &lt;div class="col-md-8 text-center"&gt;Inward&lt;/div&gt;
           &lt;/div&gt;
           &lt;div class="row"&gt;
              &lt;div class="col-md-4 text-center"&gt;Reams&lt;/div&gt;
              &lt;div class="col-md-4 text-center"&gt;sheets&lt;/div&gt;
           &lt;/div&gt;
        &lt;/th&gt;
        &lt;th&gt;
           &lt;div class="row"&gt;
              &lt;div class="col-md-8 text-center"&gt;Outward&lt;/div&gt;
           &lt;/div&gt;
           &lt;div class="row"&gt;
              &lt;div class="col-md-4 text-center"&gt;Reams&lt;/div&gt;
              &lt;div class="col-md-4 text-center"&gt;sheets&lt;/div&gt;
           &lt;/div&gt;
        &lt;/th&gt;
        &lt;th&gt;
           &lt;div class="row"&gt;
              &lt;div class="col-md-8 text-center"&gt;Balance&lt;/div&gt;
           &lt;/div&gt;
           &lt;div class="row"&gt;
              &lt;div class="col-md-4 text-center"&gt;Reams&lt;/div&gt;
              &lt;div class="col-md-4 text-center"&gt;sheets&lt;/div&gt;
           &lt;/div&gt;
        &lt;/th&gt;
     &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody style="cursor:pointer" v-for="(statement,index) in statements"&gt;
  </code></pre>
  
  <p>Here is my click button called when the user click on the table row 
  It passed the several Id on click and show the data from api using those id</p>
  
  <pre><code>&lt;tr class ="accordion"
        @click="statementDetail(index,statement.paper_quality_id.id,statement.paper_brand_id.id,statement.paper_size_id.id,statement.thickness)"
        &gt;
        &lt;td&gt;{{index+1}}&lt;/td&gt;
        &lt;td&gt;
           {{statement.paper_quality_id.paper_quality}} -
           {{statement.paper_size_id.length}} X {{statement.paper_size_id.width}} -
           {{statement.paper_brand_id.paper_brand}} -
           {{statement.thickness}}
        &lt;/td&gt;
        &lt;td&gt;
           &lt;div class="row"&gt;
              &lt;div
                 class="col-md-4 text-center"
                 &gt;{{parseInt((statement.in_total_before - statement.total_out_before)/500)}}&lt;/div&gt;
              &lt;div
                 class="col-md-4 text-center"
                 &gt;{{parseInt((statement.in_total_before - statement.total_out_before)%500)}}&lt;/div&gt;
           &lt;/div&gt;
        &lt;/td&gt;
        &lt;td&gt;
           &lt;div class="row"&gt;
              &lt;div
                 class="col-md-4 text-center"
                 &gt;{{parseInt((statement.total_sheets_in_range)/500)}}&lt;/div&gt;
              &lt;div
                 class="col-md-4 text-center"
                 &gt;{{parseInt((statement.total_sheets_in_range)%500)}}&lt;/div&gt;
           &lt;/div&gt;
        &lt;/td&gt;
        &lt;td&gt;
           &lt;div class="row"&gt;
              &lt;div
                 class="col-md-4 text-center"
                 &gt;{{parseInt((statement.total_outward_range)/500)}}&lt;/div&gt;
              &lt;div
                 class="col-md-4 text-center"
                 &gt;{{parseInt((statement.total_outward_range)%500)}}&lt;/div&gt;
           &lt;/div&gt;
        &lt;/td&gt;
        &lt;td&gt;
           &lt;div class="row"&gt;
              &lt;div class="col-md-4 text-center"&gt;
                 {{
                 parseInt((((statement.in_total_before - statement.total_out_before) + (statement.total_sheets_in_range)) - statement.total_outward_range)/500)
                 }}
              &lt;/div&gt;
              &lt;div class="col-md-4 text-center"&gt;
                 {{
                 parseInt((((statement.in_total_before - statement.total_out_before) + (statement.total_sheets_in_range)) - statement.total_outward_range)%500)
                 }}
              &lt;/div&gt;
           &lt;/div&gt;
        &lt;/td&gt;
     &lt;/tr&gt;
  </code></pre>
  
  <p>This is my nested table it appears the user click on any tr element</p>
  
  <pre><code>   &lt;tr :id="'show_'+index" style="display:none;"&gt;
        &lt;td colspan="6"&gt;
           &lt;table class="table table-hover"&gt;
              &lt;tr&gt;
                 &lt;th&gt;Date&lt;/th&gt;
                 &lt;th&gt;Opening&lt;/th&gt;
                 &lt;th&gt;Inward&lt;/th&gt;
                 &lt;th&gt;Outward&lt;/th&gt;
                 &lt;th&gt;Balance&lt;/th&gt;
              &lt;/tr&gt;
              &lt;tr v-for="(_statement,index) in statements_details"&gt;
                 &lt;td&gt;{{_statement.date}}&lt;/td&gt;
                 &lt;td&gt;
                    &lt;div class="row"&gt;
                       &lt;div
                          class="col-md-3 text-center"
                          &gt;{{parseInt((_statement.opening.total_in - _statement.opening.total_out)/500)}}&lt;/div&gt;
                       &lt;div
                          class="col-md-3 text-center"
                          &gt;{{parseInt((_statement.opening.total_in - _statement.opening.total_out)%500)}}&lt;/div&gt;
                    &lt;/div&gt;
                 &lt;/td&gt;
                 &lt;td&gt;
                    &lt;div class="row"&gt;
                       &lt;div class="col-md-3 text-center"&gt;{{parseInt((_statement.inward)/500)}}&lt;/div&gt;
                       &lt;div class="col-md-3 text-center"&gt;{{parseInt((_statement.inward)%500)}}&lt;/div&gt;
                    &lt;/div&gt;
                 &lt;/td&gt;
                 &lt;td&gt;
                    &lt;div class="row"&gt;
                       &lt;div class="col-md-3 text-center"&gt;{{parseInt((_statement.outward)/500)}}&lt;/div&gt;
                       &lt;div class="col-md-3 text-center"&gt;{{parseInt((_statement.outward)%500)}}&lt;/div&gt;
                    &lt;/div&gt;
                 &lt;/td&gt;
                 &lt;td&gt;
                    &lt;div class="row"&gt;
                       &lt;div
                          class="col-md-3 text-center"
                          &gt;{{parseInt((_statement.balance.total_in - _statement.balance.total_out)/500)}}&lt;/div&gt;
                       &lt;div
                          class="col-md-3 text-center"
                          &gt;{{parseInt((_statement.balance.total_in - _statement.balance.total_out)%500)}}&lt;/div&gt;
                    &lt;/div&gt;
                 &lt;/td&gt;
              &lt;/tr&gt;
           &lt;/table&gt;
        &lt;/td&gt;
     &lt;/tr&gt;
  &lt;/tbody&gt;
  </code></pre>
  
  <p>Here is click function </p>
  
  <pre><code>
      statementDetail(rowid, paper_id, brand_id, size_id, thickness) {
        const userDetail = {
          account_access_key_id: $('#ledger_id').val(),
          start_date: this.start_date + ' 00:00:00.957761',
          end_date: this.end_date + ' 00:00:00.957761',
          paper_quality_id: paper_id,
          paper_brand_id: brand_id,
          paper_size_id: size_id,
          thickness: thickness
        }
        axios.post('/StatementDetail/', userDetail)
  
          .then((response) =&gt; {
            $('#show_' + rowid).toggle();
            this.statements_details = response.data;
          }).catch((err) =&gt; {
            console.log(err)
          });
      }
  
    },
  </code></pre>