title: How to make HTML table expand on click?
body: <p>I am rendering HTML table with the help of JavaScript. I have made the table successfully, but now I have one requirement to show some new data in a row like on click expand row</p>
  
  <p>Table functionality:</p>
  
  <ul>
  <li>I am populating my table Some brand wise each brand has some items inside them, which I want to show when the brand is clicked</li>
  <li>I almost created the table, but not able to create the expandable row</li>
  <li>My one of column is populating wrong data also</li>
  </ul>
  
  <p>In my code I have commented all the lines what I am doing at which line</p>
  
  <p><strong>Issues I am facing</strong></p>
  
  <ul>
  <li>I have already commented the line where I am calculating netamount to populate inside <code>tbody</code> as <code>GRN entery</code> brand wise but that's causing the issue</li>
  </ul>
  
  <p>I have created two code snippets one as full static HTML like what I want, and a second to show what I have done.</p>
  
  <p><strong>The help I have found on Google</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"&gt;&lt;/script&gt;
  
  &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css"&gt;
  &lt;link rel="stylesheet" type="text/css" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"&gt;
  
  &lt;table class="table table-responsive table-hover table-bordered"&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th&gt; Brand Name&lt;/th&gt;
        &lt;th colspan="2"&gt;Total&lt;/th&gt;
        &lt;th colspan="2"&gt;Jayanagar&lt;/th&gt;
        &lt;th colspan="2"&gt;Malleshwaram&lt;/th&gt;
        &lt;th colspan="2"&gt;Kolar&lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;th&gt;&lt;/th&gt;
        &lt;th&gt;Grn Entery&lt;/th&gt;
        &lt;th&gt;Sales&lt;/th&gt;
        &lt;th&gt;Grn Entery&lt;/th&gt;
        &lt;th&gt;Sales&lt;/th&gt;
        &lt;th&gt;Grn Entery&lt;/th&gt;
        &lt;th&gt;Sales&lt;/th&gt;
        &lt;th&gt;Grn Entery&lt;/th&gt;
        &lt;th&gt;Sales&lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;th&gt;Total&lt;/th&gt;
        &lt;th&gt;1,97,445&lt;/th&gt;
        &lt;th&gt;6,83,880&lt;/th&gt;
        &lt;th&gt;1,97,445&lt;/th&gt;
        &lt;th&gt;4,76,426&lt;/th&gt;
        &lt;th&gt;0&lt;/th&gt;
        &lt;th&gt;1,15,313&lt;/th&gt;
        &lt;th&gt;0&lt;/th&gt;
        &lt;th&gt;92,141&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;tr&gt;
        &lt;td&gt;&lt;span class="clickable" data-toggle="collapse" id="row1" data-target=".row1"&gt;&lt;i class="fas fa-plus" id="test"&gt;&lt;/i&gt;&amp;nbsp&lt;/span&gt;Bakery FG&lt;/td&gt;
        &lt;td&gt;1,610&lt;/td&gt;
        &lt;td&gt;0.82%&lt;/td&gt;
        &lt;td&gt;1,610 &lt;/td&gt;
        &lt;td&gt;0.82%&lt;/td&gt;
        &lt;!--  this is comming as (1610/197445)*100 --&gt;
        &lt;td&gt;0&lt;/td&gt;
        &lt;td&gt;0.00%&lt;/td&gt;
        &lt;td&gt;0&lt;/td&gt;
        &lt;td&gt;0.00%&lt;/td&gt;
  
      &lt;/tr&gt;
      &lt;tr class="collapse row1"&gt;
        &lt;td&gt;Khara Boondhi-L&lt;/td&gt;
        &lt;td&gt;980&lt;/td&gt;
        &lt;td&gt;0.50%&lt;/td&gt;
        &lt;td&gt;980&lt;/td&gt;
        &lt;td&gt;0.50%&lt;/td&gt;
        &lt;!--  this is comming as (980/197445)*100 --&gt;
        &lt;td&gt;0&lt;/td&gt;
        &lt;td&gt;0.00%&lt;/td&gt;
        &lt;!-- lly for other outlets it will be calculated  --&gt;
        &lt;td&gt;0&lt;/td&gt;
        &lt;td&gt;0.00%&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="collapse row1"&gt;
        &lt;td&gt;Samosa-L&lt;/td&gt;
        &lt;td&gt;130&lt;/td&gt;
        &lt;td&gt;0.7%&lt;/td&gt;
        &lt;td&gt;130&lt;/td&gt;
        &lt;td&gt;0.7%&lt;/td&gt;
        &lt;!--  this is comming as (130/197445)*100 --&gt;
        &lt;td&gt;0&lt;/td&gt;
        &lt;td&gt;0.00%&lt;/td&gt;
        &lt;td&gt;0&lt;/td&gt;
        &lt;td&gt;0.00%&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="collapse row1"&gt;
        &lt;td&gt;Corn Flakes Masala-L&lt;/td&gt;
        &lt;td&gt;500&lt;/td&gt;
        &lt;td&gt;0.25%&lt;/td&gt;
        &lt;td&gt;500&lt;/td&gt;
        &lt;td&gt;0.25%&lt;/td&gt;
        &lt;td&gt;0&lt;/td&gt;
        &lt;td&gt;0.00%&lt;/td&gt;
        &lt;td&gt;0&lt;/td&gt;
        &lt;td&gt;0.00%&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;&lt;span class="clickable" data-toggle="collapse" data-target=".row2"&gt;&lt;i class="fas fa-plus" id="test"&gt;&lt;/i&gt;&amp;nbsp&lt;/span&gt;Pastry &amp; Cake FG&lt;/td&gt;
        &lt;td&gt;49,230&lt;/td&gt;
        &lt;td&gt;25.00%&lt;/td&gt;
        &lt;td&gt;49,230&lt;/td&gt;
        &lt;td&gt;25.00%&lt;/td&gt;
        &lt;td&gt;0&lt;/td&gt;
        &lt;td&gt;0.00%&lt;/td&gt;
        &lt;td&gt;0&lt;/td&gt;
        &lt;td&gt;0.00%&lt;/td&gt;
  
      &lt;/tr&gt;
      &lt;tr class="collapse row2"&gt;
        &lt;td&gt;Plum Cake 250gm&lt;/td&gt;
        &lt;td&gt;110&lt;/td&gt;
        &lt;td&gt;0.05%&lt;/td&gt;
        &lt;td&gt;110&lt;/td&gt;
        &lt;td&gt;0.05%&lt;/td&gt;
        &lt;td&gt;0&lt;/td&gt;
        &lt;td&gt;0.00%&lt;/td&gt;
        &lt;td&gt;0&lt;/td&gt;
        &lt;td&gt;0.00%&lt;/td&gt;
  
      &lt;/tr&gt;
      &lt;tr class="collapse row2"&gt;
        &lt;td&gt;Butterscotch Cake&lt;/td&gt;
        &lt;td&gt;720&lt;/td&gt;
        &lt;td&gt;0.36%&lt;/td&gt;
        &lt;td&gt;720&lt;/td&gt;
        &lt;td&gt;0.36%&lt;/td&gt;
        &lt;td&gt;0&lt;/td&gt;
        &lt;td&gt;0.00%&lt;/td&gt;
        &lt;td&gt;0&lt;/td&gt;
        &lt;td&gt;0.00%&lt;/td&gt;
  
      &lt;/tr&gt;
      &lt;tr class="collapse row2"&gt;
        &lt;td&gt;Chocolate chips cake&lt;/td&gt;
        &lt;td&gt;40000&lt;/td&gt;
        &lt;td&gt;20.25%&lt;/td&gt;
        &lt;td&gt;40000&lt;/td&gt;
        &lt;td&gt;20.25%&lt;/td&gt;
        &lt;td&gt;0&lt;/td&gt;
        &lt;td&gt;0.00%&lt;/td&gt;
        &lt;td&gt;0&lt;/td&gt;
        &lt;td&gt;0.00%&lt;/td&gt;
  
      &lt;/tr&gt;
      &lt;tr class="collapse row2"&gt;
        &lt;td&gt;Mango Delight Cake&lt;/td&gt;
        &lt;td&gt;14000&lt;/td&gt;
        &lt;td&gt;7.09%&lt;/td&gt;
        &lt;td&gt;14000&lt;/td&gt;
        &lt;td&gt;7.09%&lt;/td&gt;
        &lt;td&gt;0&lt;/td&gt;
        &lt;td&gt;0.00%&lt;/td&gt;
        &lt;td&gt;0&lt;/td&gt;
        &lt;td&gt;0.00%&lt;/td&gt;
  
  
      &lt;/tr&gt;
      &lt;tr class="collapse row2"&gt;
        &lt;td&gt;Almond Honey Chocolate Cake&lt;/td&gt;
        &lt;td&gt;500&lt;/td&gt;
        &lt;td&gt;0.25%
          &lt;td&gt;500&lt;/td&gt;
          &lt;td&gt;0.25%
            &lt;td&gt;0&lt;/td&gt;
            &lt;td&gt;0.00%&lt;/td&gt;
            &lt;td&gt;0&lt;/td&gt;
            &lt;td&gt;0.00%&lt;/td&gt;
  
  
      &lt;/tr&gt;
      &lt;tr class="collapse row2"&gt;
        &lt;td&gt;Peach Cake&lt;/td&gt;
        &lt;td&gt;5500&lt;/td&gt;
        &lt;td&gt;2.78%&lt;/td&gt;
        &lt;td&gt;5500&lt;/td&gt;
        &lt;td&gt;2.78%&lt;/td&gt;
        &lt;td&gt;0&lt;/td&gt;
        &lt;td&gt;0.00%&lt;/td&gt;
        &lt;td&gt;0&lt;/td&gt;
        &lt;td&gt;0.00%&lt;/td&gt;
  
      &lt;/tr&gt;
      &lt;tr class="collapse row2"&gt;
        &lt;td&gt;Black Forest Cake&lt;/td&gt;
        &lt;td&gt;1000&lt;/td&gt;
        &lt;td&gt;0.50%&lt;/td&gt;
        &lt;td&gt;1000&lt;/td&gt;
        &lt;td&gt;0.50%&lt;/td&gt;
        &lt;td&gt;0&lt;/td&gt;
        &lt;td&gt;0.00%&lt;/td&gt;
        &lt;td&gt;0&lt;/td&gt;
        &lt;td&gt;0.00%&lt;/td&gt;
  
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;&lt;span class="clickable" data-toggle="collapse" data-target=".row3"&gt;&lt;i class="fas fa-plus" id="test"&gt;&lt;/i&gt;&amp;nbsp&lt;/span&gt;Ice Cream FG&lt;/td&gt;
        &lt;td&gt;108441&lt;/td&gt;
        &lt;td&gt;54.92%&lt;/td&gt;
        &lt;td&gt;108441&lt;/td&gt;
        &lt;td&gt;54.92%&lt;/td&gt;
        &lt;td&gt;0&lt;/td&gt;
        &lt;td&gt;0.00%&lt;/td&gt;
        &lt;td&gt;0&lt;/td&gt;
        &lt;td&gt;0.00%&lt;/td&gt;
  
      &lt;/tr&gt;
      &lt;tr class="collapse row3"&gt;
        &lt;td&gt;Chocolate Crazy Boom&lt;/td&gt;
        &lt;td&gt;2360&lt;/td&gt;
        &lt;td&gt;1.19%&lt;/td&gt;
        &lt;td&gt;2360&lt;/td&gt;
        &lt;td&gt;1.19%&lt;/td&gt;
        &lt;td&gt;0&lt;/td&gt;
        &lt;td&gt;0.00%&lt;/td&gt;
        &lt;td&gt;0&lt;/td&gt;
        &lt;td&gt;0.00%&lt;/td&gt;
  
  
      &lt;/tr&gt;
      &lt;tr class="collapse row3"&gt;
        &lt;td&gt;Kesar Badam Falooda&lt;/td&gt;
        &lt;td&gt;4430&lt;/td&gt;
        &lt;td&gt;2.24%&lt;/td&gt;
        &lt;td&gt;4430&lt;/td&gt;
        &lt;td&gt;2.24%&lt;/td&gt;
        &lt;td&gt;0&lt;/td&gt;
        &lt;td&gt;0.00%&lt;/td&gt;
        &lt;td&gt;0&lt;/td&gt;
        &lt;td&gt;0.00%&lt;/td&gt;
  
  
      &lt;/tr&gt;
      &lt;tr class="collapse row3"&gt;
        &lt;td&gt;Strawberry Ice-cream&lt;/td&gt;
        &lt;td&gt;1231&lt;/td&gt;
        &lt;td&gt;0.62%&lt;/td&gt;
        &lt;td&gt;1231&lt;/td&gt;
        &lt;td&gt;0.62%&lt;/td&gt;
        &lt;td&gt;0&lt;/td&gt;
        &lt;td&gt;0.00%&lt;/td&gt;
        &lt;td&gt;0&lt;/td&gt;
        &lt;td&gt;0.00%&lt;/td&gt;
  
  
      &lt;/tr&gt;
      &lt;tr class="collapse row3"&gt;
        &lt;td&gt;TOP- Chocochips&lt;/td&gt;
        &lt;td&gt;2200&lt;/td&gt;
        &lt;td&gt;1.11%&lt;/td&gt;
        &lt;td&gt;2200&lt;/td&gt;
        &lt;td&gt;1.11%&lt;/td&gt;
        &lt;td&gt;0&lt;/td&gt;
        &lt;td&gt;0.00%&lt;/td&gt;
        &lt;td&gt;0&lt;/td&gt;
        &lt;td&gt;0.00%&lt;/td&gt;
  
      &lt;/tr&gt;
      &lt;tr class="collapse row3"&gt;
        &lt;td&gt;Cheese Cake Ice-Cream&lt;/td&gt;
        &lt;td&gt;500&lt;/td&gt;
        &lt;td&gt;0.25%&lt;/td&gt;
        &lt;td&gt;500&lt;/td&gt;
        &lt;td&gt;0.25%&lt;/td&gt;
        &lt;td&gt;0&lt;/td&gt;
        &lt;td&gt;0.00%&lt;/td&gt;
        &lt;td&gt;0&lt;/td&gt;
        &lt;td&gt;0.00%&lt;/td&gt;
  
      &lt;/tr&gt;
      &lt;tr class="collapse row3"&gt;
        &lt;td&gt;Sundae Large&lt;/td&gt;
        &lt;td&gt;2350&lt;/td&gt;
        &lt;td&gt;1.20%&lt;/td&gt;
        &lt;td&gt;2350&lt;/td&gt;
        &lt;td&gt;1.20%&lt;/td&gt;
        &lt;td&gt;0&lt;/td&gt;
        &lt;td&gt;0.00%&lt;/td&gt;
        &lt;td&gt;0&lt;/td&gt;
        &lt;td&gt;0.00%&lt;/td&gt;
  
      &lt;/tr&gt;
      &lt;tr class="collapse row3"&gt;
        &lt;td&gt;Mango Ice-cream&lt;/td&gt;
        &lt;td&gt;8000&lt;/td&gt;
        &lt;td&gt;40.5%&lt;/td&gt;
        &lt;td&gt;8000&lt;/td&gt;
        &lt;td&gt;40.5%&lt;/td&gt;
        &lt;td&gt;0&lt;/td&gt;
        &lt;td&gt;0.00%&lt;/td&gt;
        &lt;td&gt;0&lt;/td&gt;
        &lt;td&gt;0.00%&lt;/td&gt;
  
      &lt;/tr&gt;
      &lt;tr class="collapse row3"&gt;
        &lt;td&gt;Ice Blue Sundae&lt;/td&gt;
        &lt;td&gt;2340&lt;/td&gt;
        &lt;td&gt;1.19%&lt;/td&gt;
        &lt;td&gt;2340&lt;/td&gt;
        &lt;td&gt;1.19%&lt;/td&gt;
        &lt;td&gt;0&lt;/td&gt;
        &lt;td&gt;0.00%&lt;/td&gt;
        &lt;td&gt;0&lt;/td&gt;
        &lt;td&gt;0.00%&lt;/td&gt;
  
      &lt;/tr&gt;
      &lt;tr class="collapse row3"&gt;
        &lt;td&gt;Creamy Litchi Boom&lt;/td&gt;
        &lt;td&gt;2200&lt;/td&gt;
        &lt;td&gt;1.11%&lt;/td&gt;
        &lt;td&gt;2200&lt;/td&gt;
        &lt;td&gt;1.11%&lt;/td&gt;
        &lt;td&gt;0&lt;/td&gt;
        &lt;td&gt;0.00%&lt;/td&gt;
        &lt;td&gt;0&lt;/td&gt;
        &lt;td&gt;0.00%&lt;/td&gt;
  
      &lt;/tr&gt;
      &lt;tr class="collapse row3"&gt;
        &lt;td&gt;Cookies Ice-cream&lt;/td&gt;
        &lt;td&gt;7000&lt;/td&gt;
        &lt;td&gt;3.54%&lt;/td&gt;
        &lt;td&gt;7000&lt;/td&gt;
        &lt;td&gt;3.54%&lt;/td&gt;
        &lt;td&gt;0&lt;/td&gt;
        &lt;td&gt;0.00%&lt;/td&gt;
        &lt;td&gt;0&lt;/td&gt;
        &lt;td&gt;0.00%&lt;/td&gt;
  
      &lt;/tr&gt;
      &lt;tr class="collapse row3"&gt;
        &lt;td&gt;TOP- Wafer&lt;/td&gt;
        &lt;td&gt;88000&lt;/td&gt;
        &lt;td&gt;44.56%&lt;/td&gt;
        &lt;td&gt;88000&lt;/td&gt;
        &lt;td&gt;44.56%&lt;/td&gt;
        &lt;td&gt;0&lt;/td&gt;
        &lt;td&gt;0.00%&lt;/td&gt;
        &lt;td&gt;0&lt;/td&gt;
        &lt;td&gt;0.00%&lt;/td&gt;
  
      &lt;/tr&gt;
      &lt;tr class="collapse row3"&gt;
        &lt;td&gt;Litchi cherry Sundae&lt;/td&gt;
        &lt;td&gt;2440&lt;/td&gt;
        &lt;td&gt;1.23%&lt;/td&gt;
        &lt;td&gt;2440&lt;/td&gt;
        &lt;td&gt;1.23%&lt;/td&gt;
        &lt;td&gt;0&lt;/td&gt;
        &lt;td&gt;0.00%&lt;/td&gt;
        &lt;td&gt;0&lt;/td&gt;
        &lt;td&gt;0.00%&lt;/td&gt;
  
      &lt;/tr&gt;
      &lt;tr class="collapse row3"&gt;
        &lt;td&gt;Peach Malaba&lt;/td&gt;
        &lt;td&gt;2230&lt;/td&gt;
        &lt;td&gt;1.12%&lt;/td&gt;
        &lt;td&gt;2230&lt;/td&gt;
        &lt;td&gt;1.12%&lt;/td&gt;
        &lt;td&gt;0&lt;/td&gt;
        &lt;td&gt;0.00%&lt;/td&gt;
        &lt;td&gt;0&lt;/td&gt;
        &lt;td&gt;0.00%&lt;/td&gt;
  
      &lt;/tr&gt;
      &lt;tr class="collapse row3"&gt;
        &lt;td&gt;Cherry Mania Ice-Cream&lt;/td&gt;
        &lt;td&gt;2700&lt;/td&gt;
        &lt;td&gt;1.36%&lt;/td&gt;
        &lt;td&gt;2700&lt;/td&gt;
        &lt;td&gt;1.36%&lt;/td&gt;
        &lt;td&gt;0&lt;/td&gt;
        &lt;td&gt;0.00%&lt;/td&gt;
        &lt;td&gt;0&lt;/td&gt;
        &lt;td&gt;0.00%&lt;/td&gt;
  
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;&lt;span class="clickable" data-toggle="collapse" data-target=".row4"&gt;&lt;i class="fas fa-plus" id="test"&gt;&lt;/i&gt;&amp;nbsp&lt;/span&gt;North Indian FG&lt;/td&gt;
        &lt;td&gt;324&lt;/td&gt;
        &lt;td&gt;0.17%&lt;/td&gt;
        &lt;td&gt;324&lt;/td&gt;
        &lt;td&gt;0.17%&lt;/td&gt;
        &lt;td&gt;0&lt;/td&gt;
        &lt;td&gt;0.00%&lt;/td&gt;
        &lt;td&gt;0&lt;/td&gt;
        &lt;td&gt;0.00%&lt;/td&gt;
  
      &lt;/tr&gt;
      &lt;tr class="collapse row4"&gt;
        &lt;td&gt;Fruit Mixture&lt;/td&gt;
        &lt;td&gt;324&lt;/td&gt;
        &lt;td&gt;0.17%&lt;/td&gt;
        &lt;td&gt;324&lt;/td&gt;
        &lt;td&gt;0.17%&lt;/td&gt;
        &lt;td&gt;0&lt;/td&gt;
        &lt;td&gt;0.00%&lt;/td&gt;
        &lt;td&gt;0&lt;/td&gt;
        &lt;td&gt;0.00%&lt;/td&gt;
      &lt;/tr&gt;
  
  
  
    &lt;/tbody&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I want to create something like the above snippet, but its expanding on clicking of row. I want to do it when the user clicks on <code>plus</code> icon, which I <a href="https://getbootstrap.com/docs/4.0/components/collapse/" rel="nofollow noreferrer">figured out how to do</a>.</p>
  
  <p><strong>My dynamic code with JSON data</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function format(number, decimals = 2, locale = 'en-in') {
    const fixed = parseInt(number).toFixed(decimals);
    const [int, dec] = fixed.split('.')
    const intFormatted = (+int).toLocaleString(locale)
    return intFormatted + (dec ? '.' + dec : '');
  }
  var data = [{
      "outlet": "JAYANAGAR",
      "brandname": "Bakery FG",
      "itemname": "Khara Boondhi-L",
      "transactionType": "TransferIn",
      "netamount": 980
    },
    {
      "outlet": "JAYANAGAR",
      "brandname": "Bakery FG",
      "itemname": "Samosa-L",
      "transactionType": "TransferIn",
      "netamount": 130
    },
    {
      "outlet": "JAYANAGAR",
      "brandname": "Bakery FG",
      "itemname": "Corn Flakes Masala-L",
      "transactionType": "TransferIn",
      "netamount": 500
    },
    {
      "outlet": "JAYANAGAR",
      "brandname": "Pastry &amp; Cake FG",
      "itemname": "Plum Cake 250gm",
      "transactionType": "TransferIn",
      "netamount": 110
    },
    {
      "outlet": "JAYANAGAR",
      "brandname": "Pastry &amp; Cake FG",
      "itemname": "Butterscotch Cake",
      "transactionType": "TransferIn",
      "netamount": 720
    },
    {
      "outlet": "JAYANAGAR",
      "brandname": "Pastry &amp; Cake FG",
      "itemname": "Chocolate chips cake",
      "transactionType": "TransferIn",
      "netamount": 40000
    },
    {
      "outlet": "JAYANAGAR",
      "brandname": "Pastry &amp; Cake FG",
      "itemname": "Mango Delight Cake",
      "transactionType": "TransferIn",
      "netamount": 14000
    },
    {
      "outlet": "JAYANAGAR",
      "brandname": "Pastry &amp; Cake FG",
      "itemname": "Almond Honey Chocolate Cake",
      "transactionType": "TransferIn",
      "netamount": 500
    },
    {
      "outlet": "JAYANAGAR",
      "brandname": "Pastry &amp; Cake FG",
      "itemname": "Peach Cake",
      "transactionType": "TransferIn",
      "netamount": 5500
    },
    {
      "outlet": "JAYANAGAR",
      "brandname": "Pastry &amp; Cake FG",
      "itemname": "Black Forest Cake",
      "transactionType": "TransferIn",
      "netamount": 1000
    },
    {
      "outlet": "JAYANAGAR",
      "brandname": "Ice Cream FG",
      "itemname": "Chocolate Crazy Boom",
      "transactionType": "TransferIn",
      "netamount": 2360
    },
    {
      "outlet": "JAYANAGAR",
      "brandname": "Ice Cream FG",
      "itemname": "Hot Chocolate Fudge",
      "transactionType": "TransferIn",
      "netamount": 2340
    },
    {
      "outlet": "JAYANAGAR",
      "brandname": "Ice Cream FG",
      "itemname": "Chocolate Sugar Free Ice-Cream",
      "transactionType": "TransferIn",
      "netamount": 1000
    },
    {
      "outlet": "JAYANAGAR",
      "brandname": "Ice Cream FG",
      "itemname": "Kesar Badam Falooda",
      "transactionType": "TransferIn",
      "netamount": 4430
    },
    {
      "outlet": "JAYANAGAR",
      "brandname": "Ice Cream FG",
      "itemname": "Strawberry Ice-cream",
      "transactionType": "TransferIn",
      "netamount": 1231
    },
    {
      "outlet": "JAYANAGAR",
      "brandname": "Ice Cream FG",
      "itemname": "TOP- Chocochips",
      "transactionType": "TransferIn",
      "netamount": 2200
    },
    {
      "outlet": "JAYANAGAR",
      "brandname": "Ice Cream FG",
      "itemname": "Cheese Cake Ice-Cream",
      "transactionType": "TransferIn",
      "netamount": 500
    },
    {
      "outlet": "JAYANAGAR",
      "brandname": "Ice Cream FG",
      "itemname": "Sundae Large",
      "transactionType": "TransferIn",
      "netamount": 2350
    },
    {
      "outlet": "JAYANAGAR",
      "brandname": "Ice Cream FG",
      "itemname": "Mango Ice-cream",
      "transactionType": "TransferIn",
      "netamount": 8000
    },
    {
      "outlet": "JAYANAGAR",
      "brandname": "Ice Cream FG",
      "itemname": "TOP- Shooting Star",
      "transactionType": "TransferIn",
      "netamount": 2360
    },
    {
      "outlet": "JAYANAGAR",
      "brandname": "Ice Cream FG",
      "itemname": "Ice Blue Sundae",
      "transactionType": "TransferIn",
      "netamount": 2340
    },
    {
      "outlet": "JAYANAGAR",
      "brandname": "Ice Cream FG",
      "itemname": "Creamy Litchi Boom",
      "transactionType": "TransferIn",
      "netamount": 2200
    },
    {
      "outlet": "JAYANAGAR",
      "brandname": "Ice Cream FG",
      "itemname": "Cookies Ice-cream",
      "transactionType": "TransferIn",
      "netamount": 7000
    },
    {
      "outlet": "JAYANAGAR",
      "brandname": "Ice Cream FG",
      "itemname": "TOP- Wafer",
      "transactionType": "TransferIn",
      "netamount": 88000
    },
    {
      "outlet": "JAYANAGAR",
      "brandname": "Ice Cream FG",
      "itemname": "Litchi cherry Sundae",
      "transactionType": "TransferIn",
      "netamount": 2440
    },
    {
      "outlet": "JAYANAGAR",
      "brandname": "Ice Cream FG",
      "itemname": "Peach Malaba",
      "transactionType": "TransferIn",
      "netamount": 2230
    },
    {
      "outlet": "JAYANAGAR",
      "brandname": "Ice Cream FG",
      "itemname": "Cherry Mania Ice-Cream",
      "transactionType": "TransferIn",
      "netamount": 2700
    },
    {
      "outlet": "JAYANAGAR",
      "brandname": "North Indian FG",
      "itemname": "Fruit Mixture",
      "transactionType": "TransferIn",
      "netamount": 324
    },
    {
      "outlet": "JAYANAGAR",
      "brandname": "NA",
      "itemname": "NA",
      "transactionType": "Sales",
      "netamount": 476426
    },
    {
      "outlet": "KOLAR",
      "brandname": "NA",
      "itemname": "NA",
      "transactionType": "Sales",
      "netamount": 115313
    },
    {
      "outlet": "MALLESHWARAM",
      "brandname": "NA",
      "itemname": "NA",
      "transactionType": "Sales",
      "netamount": 92141
    }
  ]
  let formatData = function(data) {
    let brandnames = [];
    let itemnames = [];
    let outlets = [];
    let maxUniqueForOutlets = {};
    data.forEach(element =&gt; {
  
      if (!maxUniqueForOutlets[element["brandname"]]) {
  // i just want to filter this brand and items whichhave NA
        maxUniqueForOutlets[element["brandname"]] = [];
        console.log(maxUniqueForOutlets[element["brandname"]]) //key value pair of brandname and itemname
      }
      if (maxUniqueForOutlets[element["brandname"]].indexOf(element["itemname"]) == -1) {
        maxUniqueForOutlets[element["brandname"]].push(element["itemname"]);
      }
  
      if (brandnames.indexOf(element.brandname) == -1 &amp;&amp; (element.brandname) !== "NA") { //taking brandname which do not have bradname===NA
        brandnames.push(element.brandname);
      }
      if (itemnames.indexOf(element.itemname) == -1 &amp;&amp; (element.itemname) !== "NA") { //taking itemname which do not have bradname===NA
        itemnames.push(element.itemname);
  
      }
      if (outlets.indexOf(element.outlet) == -1) {
        outlets.push(element.outlet);
      }
    });
  
  
    return {
      data: data,
      brandnames: brandnames,
      itemnames: itemnames,
      outlets: outlets,
      maxUniqueForOutlets: maxUniqueForOutlets
    };
  };
  var totalSalesPercentage = '';
  var olWiseSalesPercentage = '';
  let renderTable = function(data) {
    let brandnames = data.brandnames;
    let itemnames = data.itemnames;
    let outlets = data.outlets;
    let maxUniqueForOutlets = data.maxUniqueForOutlets;
    data = data.data;
    let tbl = document.getElementById("ConsumptionTable");
    let table = document.createElement("table");
    let thead = document.createElement("thead");
    let headerRow = document.createElement("tr");
    let th = document.createElement("th");
  
    th = document.createElement("th");
    th.innerHTML = "Brand Name";
    th.classList.add("text-center");
    headerRow.appendChild(th);
  
    let grandTotal = 0;
    let grandNetAmount = 0;
    let outletWiseTotal = {};
    let outletWiseNetamount = {};
    th = document.createElement("th");
    th.colSpan = 2;
    th.innerHTML = "Total";
    th.classList.add("text-center");
    headerRow.appendChild(th);
  
    outlets.forEach(element =&gt; {
  
      th = document.createElement("th");
      th.colSpan = 2;
      th.innerHTML = element; // populating outlet 
      th.classList.add("text-center");
      headerRow.appendChild(th);
      outletWiseTotal[element] = 0;
      data.forEach(el =&gt; {
        if (el.outlet == element &amp;&amp; el.brandname !== "NA") { //taking brandname which do not have bradname===NA
          outletWiseTotal[element] += parseInt(el.netamount); //here i am calculating the outletWiseTotal where transcationType==TransferIn
  
        }
        if (el.outlet == element &amp;&amp; el.brandname == "NA" &amp;&amp; el.transactionType == "Sales") { //taking brandname which do not have bradname===NA
          outletWiseNetamount[element] = parseInt(el.netamount) || 0
  
  
        }
  
      });
      grandTotal += outletWiseTotal[element]; //then calculating grand total to populate it into  Total column at grn entery
  
      grandNetAmount += outletWiseNetamount[element] || 0
  
    });
  
    thead.appendChild(headerRow);
    headerRow = document.createElement("tr");
    th = document.createElement("th");
    th.innerHTML = "";
    headerRow.appendChild(th);
  
    for (let i = 0; i &lt; outlets.length + 1; i++) {
      th = document.createElement("th");
      th.innerHTML = "Sales";
      th.classList.add("text-center");
      headerRow.appendChild(th);
  
      th = document.createElement("th");
      th.innerHTML = "Grn Entery";
      th.classList.add("text-center");
      headerRow.appendChild(th);
    }
  
    headerRow.insertBefore(th, headerRow.children[1]);
    thead.appendChild(headerRow);
    table.appendChild(thead);
  
    headerRow = document.createElement("tr");
    let td = document.createElement("th");
    td.innerHTML = "Total";
    td.classList.add("text-center");
    headerRow.appendChild(td);
    let el1 = 0;
    outlets.forEach(element =&gt; {
  
      td = document.createElement("th");
      td.innerHTML = outletWiseTotal[element].toLocaleString('en-IN');
      td.classList.add("text-right");
      headerRow.appendChild(td);
      if (element.outlet == element) {
        el1 = element.netAmount;
      }
      td = document.createElement("th");
      td.innerHTML = outletWiseNetamount[element].toLocaleString('en-IN') || 0;
      td.classList.add("text-right");
      headerRow.appendChild(td);
  
    });
    td = document.createElement("th");
    td.innerHTML = grandNetAmount.toLocaleString('en-IN');
    td.classList.add("text-right");
    headerRow.insertBefore(td, headerRow.children[1]);
  
    td = document.createElement("th");
    td.innerHTML = grandTotal.toLocaleString('en-IN');
    td.classList.add("text-right");
    headerRow.insertBefore(td, headerRow.children[1]);
    thead.appendChild(headerRow);
    table.appendChild(thead);
  
    let tbody = document.createElement("tbody");
  
    Object.keys(maxUniqueForOutlets).forEach(function(element) { // rendering brand name
      let row = document.createElement("tr");
      row.classList.add('header');
      td = document.createElement("td");
      td.innerHTML = '&lt;span&gt;&lt;i class="fas fa-plus" id="test"&gt;&lt;/i&gt;&amp;nbsp&lt;/span&gt;' + element; //creating plus font icon to make click happen
  
      row.appendChild(td);
  
  
      let total = 0;
      let totalBCount = 0;
      outlets.forEach(outlet =&gt; {
        let el = 0;
        let bc = 0;
        data.forEach(d =&gt; {
          if (d.brandname == element &amp;&amp; d.outlet == outlet) {
            total += parseInt(d.netamount);
            el = d.netamount; //calculating outlet wise net amount
  
          }
  
        });
  
  
        olWiseSalesPercentage = (el / outletWiseTotal[outlet]) * 100 || 0
        td = document.createElement("td");
        td.innerHTML = el.toLocaleString('en-IN'); // by this one i am populating outlet wise values for bramd but it is displaying wrong values
  
        td.classList.add("text-right");
        row.appendChild(td);
        td = document.createElement("td");
        td.innerHTML = olWiseSalesPercentage.toFixed(2) + "%";
  
        td.classList.add("text-right");
        row.appendChild(td);
      });
  
      totalSalesPercentage = (total / grandTotal) * 100 //here doing some calculations
      const totalSalesPercentageFix = totalSalesPercentage.toFixed(2) + "%"
      td = document.createElement("td");
      td.innerHTML = totalSalesPercentageFix;
      td.classList.add("text-right");
      row.insertBefore(td, row.children[1]);
  
      td = document.createElement("td");
      td.innerHTML = total.toLocaleString('en-IN');
      td.classList.add("text-right");
      row.insertBefore(td, row.children[1]);
  
  
  
  
  
      tbody.appendChild(row);
  
  
      maxUniqueForOutlets[element].forEach(function(k) { //this one is populating itemwise values but it starts with Total column Total column will populate Total 
        let rowChildren = document.createElement("tr");
        const filteredData = data.filter(a =&gt; a.itemname === k);
        if (filteredData.length &gt; 0) {
          var tdNew = document.createElement("td");
          tdNew.innerHTML = filteredData[0].netamount;
          tdNew.classList.add("text-right");
          var tdName = document.createElement("td");
          tdName.innerHTML = filteredData[0].itemname;
          tdName.classList.add("text-left");
          rowChildren.appendChild(tdName);
          rowChildren.appendChild(tdNew);
          outlets.forEach(outlet =&gt; {
            const emptyCell = document.createElement('td'); //this i am creating staticly how can i create this statically as here i have 3 outlets so i am creating 
            emptyCell.innerHTML = "12";
            emptyCell.classList.add("text-right");
            rowChildren.appendChild(emptyCell);
  
            const emptyCell1 = document.createElement('td');
            emptyCell1.innerHTML = "13";
            emptyCell1.classList.add("text-right");
            rowChildren.appendChild(emptyCell1);
  
  
            tbody.appendChild(rowChildren);
          });
        }
      })
    });
  
    table.appendChild(tbody);
    tbl.innerHTML = "";
    tbl.appendChild(table);
    table.classList.add("table");
    table.classList.add("table-striped");
    table.classList.add("table-bordered");
    table.classList.add("table-hover");
  
  }
  let formatedData = formatData(data);
  renderTable(formatedData);
  
  
  var ua = navigator.userAgent,
    event = (ua.match(/iPad/i)) ? "touchstart" : "click";
  $('.table .header .fa-plus').on(event, function() {
    $(this).closest('.header').toggleClass("active", "").nextUntil('.header').css('display', function(i, v) {
      return this.style.display === 'table-row' ? 'none' : 'table-row';
    });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#test {
    color: green;
    cursor: pointer;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css"&gt;
  &lt;link rel="stylesheet" type="text/css" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"&gt;
  &lt;div align="center" class="table table-responsive"&gt;
    &lt;table id="ConsumptionTable"&gt;&lt;/table&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I have tried the other approach, which was when the user clicks on any brand I was making an Ajax call and running the query on the basis of that brand name and getting data, but still not able to get the expand functionality.</p>
  
  <p>Now I realised that this is the best approach to get the data at once, then make table with that; I am just struggling to get it right</p>
  
  <p><strong>Dynamic Code Working process</strong></p>
  
  <ul>
  <li>Currently I have table with <code>Brand Name</code>,<code>Grn Entery</code>,<code>Sales</code> Sales body data which is in percentage I am calculating it by dividing <code>grn</code> by Total grn of that column and dividing it by 100</li>
  <li>So when user clicks on any brand names's icon that is <code>plus</code> in my case I want to expand rows with all itemnames of that brand and whole structure of table will be same as it is for <code>brandname</code> wise, grn calculation wil all be according to item name, currently it is as per brand name</li>
  </ul>
  
  <p><strong>Edit/update</strong></p>
  
  <p>I am having some issues:</p>
  
  <ul>
  <li><p>First of all  using this code I am geting brand names and item names but it is taking NA also, I have tried to filter it out but haven't succeeded. Please check my snippet, I have commented all lines there.</p></li>
  <li><p>when there is transactiontype:sales and itemname and brandname= <code>NA</code> then I am populating those values in header as sales value they don't have any relation with calculating percentage</p></li>
  <li><p>when I am populating the item inside brand there I have to do it dynamically I have tried but didn't get that</p></li>
  </ul>
  
  <p><a href="https://i.stack.imgur.com/RTQng.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RTQng.png" alt="Table description with image"></a></p>