How to retrieve array inside array in javascript?

Here is my Json array. I want to retrieve child arrays and I need to display all the invoices details under the project section. Please check the attached screenshot. In the screenshot you can see only last invoice details only displaying to all other projects. The last invoice number 1005 is showing for all. How can I show invoice details based on the project details?

When child row is empty,project details (parent) also not showing.Am getting projectinvoicesection: [] Array 0. I need to display project details and no record found in invoice section. But now am getting array zero.

[{
    "parent": {
      "project_ID": "1",
      "project_title": "Network and Telephone Points",
      "particulars": "Test Description",
      "project_amount": "10000.00",
      "type": "One Time",
    },
    "child": [{
      "invoice_No": "1002",
      "received_Amt": "0.00",
      "invoice_amount": "472.50",
      "proje_ID": "1",
      "invoice_Date": "2021-08-31"
    }]
  },
  {
    "parent": {
      "project_ID": "2",
      "project_title": "Configuration and Programming",
      "particulars": "test description",
      "project_amount": "2000.00",
      "type": "One Time",
      "period_type": " ",
    },
    "child": [{
      "invoice_No": "1004",
      "received_Amt": "0.00",
      "invoice_amount": "245.70",
      "proje_ID": "2",
      "invoice_Date": "2021-08-30"
    }]
  },
  {
    "parent": {
      "project_ID": "3",
      "project_title": "Coffee ERP",
      "particulars": "test",
      "project_amount": "50000.00",
      "type": "One Time",
      "period_type": " ",
    },
    "child": [{
        "invoice_No": "1000",
        "received_Amt": "0.00",
        "invoice_amount": "1820.70",
        "proje_ID": "3",
        "invoice_Date": "2021-08-19"
      },
      {
        "invoice_No": "1001",
        "received_Amt": "0.00",
        "invoice_amount": "1773.45",
        "proje_ID": "3",
        "invoice_Date": "2021-08-24"
      }
    ]
  },
  {
    "parent": {
      "project_ID": "6",
      "project_title": "sample project new design",
      "particulars": "Test Project new",
      "project_amount": "4000.00",
      "type": "One Time",
      "period_type": " ",
    },
    "child": [{
      "invoice_No": "1005",
      "received_Amt": "0.00",
      "invoice_amount": "283.50",
      "proje_ID": "6",
      "invoice_Date": "2021-08-21"
    }]
  }
]

I have tried this code below:

for (var i = 0; i < new_data.projectinvoicesection.length; i++) {
  var sl = i + 1;

  //alert(t6)                   

  var t1 = new_data.projectinvoicesection[i]['parent'].project_amount;
  //alert(t1)
  var t2 = new_data.projectinvoicesection[i]['parent'].particulars;
  var t3 = new_data.projectinvoicesection[i]['parent'].project_ID;
  var t4 = new_data.projectinvoicesection[i]['parent'].project_title;
  var t5 = new_data.projectinvoicesection[i]['parent'].type;
  var t56 = new_data.projectinvoicesection[i]['parent'].period_type;

  var object = new_data.projectinvoicesection[i]['child'];

  var tr = "<tr data-toggle='collapse' data-target='#demo" + t3 + "' style='background-color: #337ab7;color: white;' class='accordion-toggle'><td>" + sl + "</td><td>" + t4 + "</td><td>" + t1 + "</td><td style='white-space: nowrap;'>" + t5 + " " + t56 + "</td><td><button class='open-button-project-edit btn' data-toggle='modal' data-backdrop='static' data-keyboard='false' data-target='#exampleModal_2' onclick='openForm3(" + t3 + ")' style='color: #fff;background-color: #398439;border-color: #255625;'>EDIT</button></td></tr><tr><td colspan='6' class='hiddenRow'><div class='accordian-bodyproj collapse' id='demo" + t3 + "'> <table id='tableinvoice_proj' class='tableinvoice_proj' style='border-collapse:collapse;'><thead><tr><th>Invoice Date</th><th>Invoice Number</th><th>Invoice Amount</th><th>Received Amount</th><th>Generate Receipt</th></tr></thead><tbody></tbody></table>";
  $("#tableproject").append(tr);
  $("#tableproject").append('</div></td></tr>');
}

for (var property in object) {
  //alert(object[property].invoice_No);
  var t6 = format(object[property].invoice_Date);
  var t7 = object[property].invoice_No;
  var t8 = object[property].invoice_amount;
  var t9 = object[property].received_Amt;
  var t10 = object[property].proje_ID; //invoice table's project id

  var trtoggle = "<tr><td>" + t6 + "</td><td>" + t7 + "</td><td>" + t8 + "</td><td class=''>" + t9 + "</td><td class=''><input type='checkbox' name='myTextEditBox' value='checked' /> checkbox</td></tr>";
  
  $(".tableinvoice_proj").append(trtoggle);

}

Here is the screenshot

PHP MODAL:

 public function list_all_projects_invoice($data) //project section display with ALL Category
{ 
     $array_store = array();
foreach($this->one_allcategory($data) as $row) {
           $child = $this->many_allcategory($row['project_ID']);
           if($child) {          
                $return = array_merge(array("parent" => $row), array("child" =>$child));               
                array_push($array_store, $return);                                              
           }   
        }
        return $array_store;    
}

public function one_allcategory($data) {
        $query = $this->db->select("*")
        ->where("comp_ID", $data)
        ->get("project_details")
        ->result_array();
        return $query;
    }

    public function many_allcategory($id) {
        $query = $this->db->select('invoice_No,received_Amt,invoice_amount,proje_ID,invoice_Date')        
        ->where("proje_ID", $id)
        ->get("invoice_details")
        ->result_array();
        return $query;
    }

Answer

It’s because you append trtoggle to .tableinvoice_proj without specifying the exact element with this class then trtoggle append to all of element with .tableinvoice_proj class.

According to the code you can try

$(".tableinvoice_proj").last().append(trtoggle);

instead of

$(".tableinvoice_proj").append(trtoggle);

new_data = new Object();
new_data.projectinvoicesection = [{
    "parent": {
      "project_ID": "1",
      "project_title": "Network and Telephone Points",
      "particulars": "Test Description",
      "project_amount": "10000.00",
      "type": "One Time",
    },
    "child": [{
      "invoice_No": "1002",
      "received_Amt": "0.00",
      "invoice_amount": "472.50",
      "proje_ID": "1",
      "invoice_Date": "2021-08-31"
    }]
  },
  {
    "parent": {
      "project_ID": "2",
      "project_title": "Configuration and Programming",
      "particulars": "test description",
      "project_amount": "2000.00",
      "type": "One Time",
      "period_type": " ",
    },
    "child": [{
      "invoice_No": "1004",
      "received_Amt": "0.00",
      "invoice_amount": "245.70",
      "proje_ID": "2",
      "invoice_Date": "2021-08-30"
    }]
  },
  {
    "parent": {
      "project_ID": "3",
      "project_title": "Coffee ERP",
      "particulars": "test",
      "project_amount": "50000.00",
      "type": "One Time",
      "period_type": " ",
    },
    "child": [{
        "invoice_No": "1000",
        "received_Amt": "0.00",
        "invoice_amount": "1820.70",
        "proje_ID": "3",
        "invoice_Date": "2021-08-19"
      },
      {
        "invoice_No": "1001",
        "received_Amt": "0.00",
        "invoice_amount": "1773.45",
        "proje_ID": "3",
        "invoice_Date": "2021-08-24"
      }
    ]
  },
  {
    "parent": {
      "project_ID": "6",
      "project_title": "sample project new design",
      "particulars": "Test Project new",
      "project_amount": "4000.00",
      "type": "One Time",
      "period_type": " ",
    },
    "child": [{
      "invoice_No": "1005",
      "received_Amt": "0.00",
      "invoice_amount": "283.50",
      "proje_ID": "6",
      "invoice_Date": "2021-08-21"
    }]
  },
  {
    "parent": {
      "project_ID": "9",
      "project_title": "TEST",
      "particulars": "NO RESULT",
      "project_amount": "0",
      "type": "One Time",
      "period_type": " ",
    },
    "child": []
  }
]




for (var i = 0; i < new_data.projectinvoicesection.length; i++) {
    
    var sl = i + 1;

    //alert(t6)                   

    var t1 = new_data.projectinvoicesection[i]['parent'].project_amount;
    //alert(t1)
    var t2 = new_data.projectinvoicesection[i]['parent'].particulars;
    var t3 = new_data.projectinvoicesection[i]['parent'].project_ID;
    var t4 = new_data.projectinvoicesection[i]['parent'].project_title;
    var t5 = new_data.projectinvoicesection[i]['parent'].type;
    var t56 = new_data.projectinvoicesection[i]['parent'].period_type;

    var object = new_data.projectinvoicesection[i]['child'];

    var tr = "<tr data-toggle='collapse' data-target='#demo" + t3 + "' style='background-color: #337ab7;color: white;' class='accordion-toggle'><td>" + sl + "</td><td>" + t4 + "</td><td>" + t1 + "</td><td style='white-space: nowrap;'>" + t5 + " " + t56 + "</td><td><button class='open-button-project-edit btn' data-toggle='modal' data-backdrop='static' data-keyboard='false' data-target='#exampleModal_2' onclick='openForm3(" + t3 + ")' style='color: #fff;background-color: #398439;border-color: #255625;'>EDIT</button></td></tr><tr><td colspan='6' class='hiddenRow'><div class='accordian-bodyproj collapse' id='demo" + t3 + "'> <table id='tableinvoice_proj' class='tableinvoice_proj' style='border-collapse:collapse;'><thead><tr><th>Invoice Date</th><th>Invoice Number</th><th>Invoice Amount</th><th>Received Amount</th><th>Generate Receipt</th></tr></thead><tbody></tbody></table>";
    
    $("#tableproject").append(tr);
    $("#tableproject").append('</div></td></tr>');

    if( !object || object.length < 1)
    {
        var trtoggle = `<tr ><td style='text-align:center;' colspan='5' > No records found!</td></tr>`;
    } else
    {
    var trtoggle = '';
        for ( var property in object ) {
            
            //alert(object[property].invoice_No);
            var t6 = object[property].invoice_Date;
            var t7 = object[property].invoice_No;
            var t8 = object[property].invoice_amount;
            var t9 = object[property].received_Amt;
            var t10 = object[property].proje_ID; //invoice table's project id

            trtoggle += "<tr><td>" + t6 + "</td><td>" + t7 + "</td><td>" + t8 + "</td><td class=''>" + t9 + "</td><td class=''><input type='checkbox' name='myTextEditBox' value='checked' /> checkbox</td></tr>";
        }
        
        
    }
  $(".tableinvoice_proj").last().append(trtoggle);
 
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tableproject">
</table>