Workaround or alternative tree grid to JqxTreeGrid due to unique id issue?

Question

I currently use the widget JqxTreeGrid for large datasets for my company. I've come across a fatal issue where child parts of different parents that are the same part aren't treated as unique rows and so when one row is manipulated, both are manipulated.

Here is the example js fiddle for the issue: https://jsfiddle.net/gz9wejd2/1/

As you might notice when "Child Black Tea" is selected, it selects both children despite in the widget their "id" being unique. Also if you change the quantity of one of the "Child Black Tea", it sets the quantity of all the children to the last child's quantity removing any unique part of them.

Does anyone have an alternative tree grid that follows a similar data structure? Or a fix for this issue as JqWidgets themselves have put up an open request to fix it but have no answer to my problem.

<div id="treegrid">
</div>
<script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxdatatable.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxtreegrid.js"></script>
<script>
$(document).ready(function() {

  const data = [{
      name: "Black Tea",
      id: 1,
      parentid: null,
      partid: 5,
      quantity: 4
    },
    {
      name: "Green Tea",
      id: 3,
      parentid: null,
      partid: 6,
      quantity: 4
    },
    {
      name: "Child Black Tea",
      id: 2,
      parentid: 5,
      partid: 2,
      quantity: 4
    },
    {
      name: "Child Black Tea",
      id: 4,
      parentid: 6,
      partid: 2,
      quantity: 5
    }
  ]
  // prepare the data
  var source = {
    dataType: "array",
    dataFields: [{
        name: "name",
        type: "string"
      },
      {
        name: "quantity",
        type: "number"
      },
      {
        name: "id",
        type: "string"
      },
      {
        name: "parentid",
        type: "number"
      },
      {
        name: "partid",
        type: "number"
      }
    ],
    hierarchy: {
      keyDataField: {
        name: 'partid'
      },
      parentDataField: {
        name: 'parentid'
      }
    },
    id: 'id',
    localData: data
  };
  var dataAdapter = new $.jqx.dataAdapter(source);
  // create Tree Grid
  $("#treegrid").jqxTreeGrid({
    width: '90%',
    source: dataAdapter,
    sortable: true,
    editable: true,
    pageable: true,
    ready: function() {
      $("#treegrid").jqxTreeGrid('expandRow', '2');
    },
    columns: [{
        text: 'Order Name',
        dataField: "name",
        align: 'center'
      },
      {
        text: 'Quantity',
        dataField: "quantity",
        cellsFormat: "c2",
        align: 'center',
        cellsAlign: 'right'
      }
    ]
  });
});
</script>

I've attempted their alternate way of having children embedded within their parent as a large multi dimensional array but that causes slowdown on the backend as sometimes the dataset can be quite large and creating that array causes increased loading.