This is my current project using Javascript library, BalkanApp

The Add button is from library

This is the coding from the template

        template: "ula",
        nodeBinding: {
            field_0: "name",
            field_1: "title",
            img_0: "img"
        },
        nodeMenu: {
            details: { text: "Details" },
            edit: { text: "Edit" },
            add: { text: "Add" }, 
            remove: { text: "Remove" }
        }           
  });

This is the details I need to INSERT into MYSQL

nodes = [
{ id: 3, pid: 1, tags: ["blue"],  ppid: 2, name: "Queen Elizabeth II", img: "https://cdn.balkan.app/shared/f5.png"},
        { id: 4, pid: 3, tags: ["left-partner"], name: "Prince Philip", title: "Duke of Edinburgh", img: "https://cdn.balkan.app/shared/f3.png"}

];

And this is what I have done for now

chart.on('add', function (sender, node) {

<?php
    $sql = "INSERT INTO individual (id, pid, ppid, tags, name, title, img)
    VALUES ('node.id', 'node.pid', 'node.ppid', 'node.tags', 'node.name', 'node.title', 'node.img')";
    
    if ($mysqli->query($sql) === TRUE) {
      echo "New record created successfully";
    } else {
      echo "Error: " . $sql . "<br>" . $conn->error;
    }
    
    $conn->close();
?>
});

I found the explanation of the library here but still cannot find the solution https://balkan.app/OrgChartJS/Docs/Menus https://balkan.app/OrgChartJS/Docs/APIReference#addEvent