How to create dyanmic check box?

this is the following data I have.

let jsonData = [
  {
    "selected": false,
    "id": 0,
    "firstName": "Corine",
    "lastName": "Howe",
    "companyName": "Zboncak - Renner",
    "detail": {
      "selected": false,
      "firstName": "Dedrick",
      "lastName": "Kilback",
      "address": {
        "zipCode": "28737",
        "city": "Goldnerborough",
        "street": "Cortney Harbors"
      },
      "email": "Rafaela98@yahoo.com",
      "list": [
        "laborum",
      ]
    }
  },
  {

    "id": 1,
    "firstName": "Halie",
    "lastName": "Yundt",
    "detail": {
      "firstName": "Lydia",
      "lastName": "Steuber",
      "address": {
        "zipCode": "00830-6266",
        "city": "Runolfsdottirchester",
        "street": "Koss Spurs"
      },
      "email": "Orin.Gorczany69@hotmail.com",
      "list": [
        "qui",
        "numquam",
        "praesentium"
      ]
    }
  },
  {
    "selected": false,
    "id": 2,
    "firstName": "Kane",
    "detail": {
      "selected": false,
      "firstName": "Bessie",
      "lastName": "Powlowski",
      "address": {
        "selected": false,
        "zipCode": "05551-0911",
        "city": "Onafurt",
        "street": "Iva Ridge"
      },
      "email": "Eduardo.Larson89@hotmail.com",
      "list": [
        "asperiores",
        "praesentium",
        "id"
      ]
    }
  },
  {
    "selected": false,
    "id": 3,
    "firstName": "Elyse",ate definition",
    "companyName": "Stehr, Johns and Robel",
    "detail": {
      "selected": false,
      "firstName": "Wellington",
      "lastName": "Hagenes",
      "address": {
        "selected": false,
        "zipCode": "28913",
        "city": "Conradton",
        "street": "Leffler Drive"
      },
      "email": "Stewart20@gmail.com",
      "list": [
        "ipsa",
        "nobis",
        "qui"
      ]
    }
  }]

please assume that there will be a check box for each row of the table.

on the selection of parent, all children should get selected

on the select child, the particular child should get selected.

it should work similarly to the nested check box. On the selection of a particular row... I am getting only particular row data. if it's the child then only child data I am receiving.... how to achieve this?

how to achieve this can anyone help thanks in advance!