Is it possible to set child as parent for dynamic table row in jquery and calculate up the sum of child and display at parent row?

See more:

Javascript

HTML

jQuery

I have three Groups - CAPITAL, FIXED ASSET & CURRENT ASSET (pink color).

If there is no another row under it, it is a child unless there is another row under it, it will become a parent where the textbox of the row will be disabled. If the row act as parent and child, the textbox will also disabled. How can I define the parent and disabled the textbox since the level of row is dynamic? In my image, grey color mean the textbox is disabled.

Next, I want to calculate the total amount of each child and display at their own parent row(if have) and group. Please see my image 3. Users only can input value in the child. For now, I only success calculate the grand total amount and the sum of each group as shown in my JS Fiddle [Current JS Fiddle for Image 1] or [Image 1]. How to calculate each of the child and display on the parent row based on group condition for the table?

Image 1: [My Current result]
Image 2: [My My Expected Result For Setting Parent and disabled textbox]
Image 3: [My Expected Result for Calculate up the sum of group]

What I have tried:

For now what I have tried is I was using data-depth to set the child as parent to disable the textbox. But, how can I calculate the sum of child and display on the parent that I defined based on the data-depth? [JS FIDDLE for Image 2]I not sure my coding is right or not for set the child as parent. Can someone help me for the calculation?

$('tbody tr').each(function() {
  var depth = $(this).attr("data-depth");
  if ($(this).next().attr("data-depth") > depth) {
    var parent = $(this).find("input").prop("disabled", true)
  }
})