Add Multiple Row In A Table and Sub Row

Add Multiple Row In A Table and Sub Row

With jQuery, most of the time we add rows one by one in a table or delete them. But in my case, the requirement is bit different. Say I've a table and have to add new row and tested the below:

HTML: 
<button class="addRow"> Add New Row </button> <table> <thead> <tr> <th>Rows</th> </tr> </thead> <tbody> <tr> <td>Row 0</td> </tr> </tbody> </table>
Script: 
<script> var lineNo = 1; var html = ""; $(document).ready(function () { $(".addRow").click(function () { html = "<tr><td>Row" + lineNo + "</td></tr>"; //Binding line no  tableBody = $("table tbody"); //Getting table element with selector  tableBody.append(html); //Appending the table row  lineNo++; //Counter to keep track of added rows }); }); </script>
So with a click event, I am adding multiple rows or rows one by one. But I am not sure if I can achieve this feature. Say with adding new rows to a table, I've to add more rows in the same row. As an example, adding multiple rows seem like this: 
product size color price //Column product1 size1 color1 price1 //Row product2 size2 color2 price2
In my case, I require to do the following: 

product size color price //Column product1 size1 color1(+) price1 //Row product2 size2 color2(+) price2 color2(-) color2(-) color2(-) product3 size3 color3(+) price3 product4 size4 color4(+) price4 color4(-) color4(-) color4(-)

There will be add row option (+) in the newly created row, so user can add or remove rows and require to keep the track, say product1 with multiple colors will be assigned to that specific product 1 and so on. I am expecting ideas to implement this feature efficiently and look 
forward to hear from experts. Thanks.