I want to make organisation tree below is my code

<div class="mt-5">
    <div class="flex justify-center">
        <div class="w-56 HRInfo rounded-lg shadow-xl bg-white relative" id="item0">
            <div class="flex gap-10 p-1 py-2 items-center borderTop">
                <div class="flex gap-2 items-center ml-3">
                    <h2 class="font-semibold text-sm overflow-hidden whitespace-nowrap w-32 text-ellipsis">Node 1</h2>
                </div>
            </div>
        </div>
    </div>

    <div class="w-56 HRInfo rounded-lg shadow-xl bg-white relative" id="item1">
        <div class="flex gap-10 p-1 py-2 items-center borderTop">
            <div class="flex gap-2 items-center ml-3">
                <h2 class="font-semibold text-sm overflow-hidden whitespace-nowrap w-32 text-ellipsis">Node 2</h2>
            </div>
        </div>
    </div>

    <div class="w-56 HRInfo rounded-lg shadow-xl bg-white relative" id="item2">
        <div class="flex gap-10 p-1 py-2 items-center borderTop">
            <div class="flex gap-2 items-center ml-3">
                <h2 class="font-semibold text-sm overflow-hidden whitespace-nowrap w-32 text-ellipsis">Node 3</h2>
            </div>
        </div>
    </div>

    <div class="w-56 HRInfo rounded-lg shadow-xl bg-white relative" id="item3">
        <div class="flex gap-10 p-1 py-2 items-center borderTop">
            <div class="flex gap-2 items-center ml-3">
                <h2 class="font-semibold text-sm overflow-hidden whitespace-nowrap w-32 text-ellipsis">Node 4</h2>
            </div>
        </div>
    </div>

    <div class="w-56 HRInfo rounded-lg shadow-xl bg-white relative" id="item3">
        <div class="flex gap-10 p-1 py-2 items-center borderTop">
            <div class="flex gap-2 items-center ml-3">
                <h2 class="font-semibold text-sm overflow-hidden whitespace-nowrap w-32 text-ellipsis">Node 5</h2>
            </div>
        </div>
    </div>
</div>

<!-- Include required libraries -->
<script src="https://cdn.jsdelivr.net/npm/interactjs/dist/interact.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsPlumb/2.15.6/js/jsplumb.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js" defer></script>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        jsPlumb.ready(function () {
            jsPlumb.setContainer(document.body);

            // Make nodes draggable
            interact('.HRInfo').draggable({
                onmove: function (event) {
                    var target = event.target;
                    var x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx;
                    var y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;

                    target.style.transform = 'translate(' + x + 'px, ' + y + 'px)';
                    target.setAttribute('data-x', x);
                    target.setAttribute('data-y', y);
                },
                inertia: true
            });

            // Add endpoints for each node
            document.querySelectorAll('.HRInfo').forEach(function (el) {
                jsPlumb.addEndpoint(el, {
                    anchor: 'Continuous',
                    isSource: true,
                    isTarget: true,
                    endpoint: 'Dot'
                });
            });

            var selectedNodes = [];

            // Node selection logic
            document.querySelectorAll('.HRInfo').forEach(function (card) {
                card.addEventListener('click', function (event) {
                    var target = event.target.closest('.HRInfo');
                    if (target) {
                        selectNode(target);
                    }
                });
            });

            function selectNode(node) {
                if (selectedNodes.includes(node)) {
                    selectedNodes = selectedNodes.filter(n => n !== node);
                    node.style.border = "";
                } else {
                    selectedNodes.push(node);
                    node.style.border = "2px solid blue";
                }
            }

            // Function to connect selected nodes
            function connectSelectedNodes() {
                if (selectedNodes.length < 2) {
                    alert('Select at least two nodes to connect.');
                    return;
                }

                for (var i = 0; i < selectedNodes.length - 1; i++) {
                    jsPlumb.connect({
                        source: selectedNodes[i],
                        target: selectedNodes[i + 1],
                        overlays: [
                            ["Arrow", { location: 1 }]
                        ]
                    });
                }

                // Clear selection after connecting
                selectedNodes.forEach(n => n.style.border = "");
                selectedNodes = [];
            }

            // Add a button to connect nodes
            var connectButton = document.createElement('button');
            connectButton.textContent = 'Connect Nodes';
            connectButton.style.marginTop = '20px';
            connectButton.addEventListener('click', connectSelectedNodes);
            document.body.appendChild(connectButton);

            // Add a button to clear all connections
            var clearButton = document.createElement('button');
            clearButton.textContent = 'Clear Connections';
            clearButton.style.marginTop = '20px';
            clearButton.addEventListener('click', function () {
                jsPlumb.deleteEveryConnection();
                selectedNodes.forEach(n => n.style.border = "");
                selectedNodes = [];
            });
            document.body.appendChild(clearButton);
        });
    });
</script>

In the above code I have 5 nodes please establish connection between these nodes So that users know which node is connected to other.

The relationship is as follows:

– 1 Parent to Multiple Children
– Multiple Parents to Multiple Children
– Multiple Parents to one Child