отображать данные динамически из данных JSON, используя Javascript или Jquery

Question

Как я могу отобразить данные JSON (родитель-ребенок-внук) в трех отдельных элементах div, используя jQuery или Javascript?

Согласно моему текущему коду, это не динамически c показывает только JSON данные в отдельных делениях, но в правом div отображаются все дочерние элементы (это также показывает правнука)

Если пользователь нажимает на метку grandchild (если у нее есть дочерний элемент), тогда метка grandchild должна отображаться в среднем элементе, а их дочерний элемент (правнук) должен отображаться в правом элементе.

Я хочу сделать все метки динамическими c, чтобы при нажатии пользователем любой метки метка отображалась в среднем элементе, а его дочерние элементы - в правом.

var data = [{
    "id": 1,
    "parent": 0,
    "name": "Parent"
  },
  {
    "id": 2,
    "parent": 1,
    "name": "Child"
  },
  {
    "id": 3,
    "parent": 1,
    "name": "Child"
  },
  {
    "id": 4,
    "parent": 2,
    "name": "GrandChild"
  },
  {
    "id": 5,
    "parent": 2,
    "name": "GrandChild"
  },
  {
    "id": 6,
    "parent": 3,
    "name": "GrandChild"
  },
  {
    "id": 7,
    "parent": 3,
    "name": "GrandChild"
  },
  {
    "id": 8,
    "parent": 5,
    "name": "Great-GrandChild"
  },
  {
    "id": 9,
    "parent": 5,
    "name": "Great-GrandChild"
  },
  {
    "id": 10,
    "parent": 6,
    "name": "Great-GrandChild"
  },
  {
    "id": 11,
    "parent": 7,
    "name": "Great-GrandChild"
  }
]

let getById = (id, data) => {
  let r = data.find(x => x.id === id);
  if (r == undefined) {
    return false;
  }
  return r;
}

let add = (row, data) => {
  let class_name;
  for (i = 0; i < 1; i++) {
    if (row.id == "1")
      class_name = "left_side";
    else {
      let parent = getById(row.id, data);
      if (parent.parent == "1") {
        class_name = "middle_side";
      } else {
        class_name = "right_side";
        if (getById(parent.parent, data) === false)
          return false;
      }

    }
    $("." + class_name).append(`<span id="${row.id}" class="label">${row.name}</span>`);
  }
}

$.each(data, (index, value) => {
  if (add(value, data) === false) {
    return;
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="w-100 d-flex">
  <div class="eq_width align-self-center left_side">
    <span id="1" class="label">Parent</span>
  </div>
  <div class="vl"></div>
  <div class="eq_width align-self-center middle_side">
    <span id="2" class="label">Child</span>
    <span id="3" class="label">Child</span>
  </div>
  <div class="vl"></div>
  <div class="eq_width align-self-center right_side">
    <span id="4" class="label">GrandChild</span>
    <span id="5" class="label">GrandChild</span>
    <span id="6" class="label">GrandChild</span>
    <span id="7" class="label">GrandChild</span>
  </div>
</div>