Using jsTree, how could I add a new item to the subgroup of an existing parent, if that parent is selected/highlighted?

Question

<script>

        $(function () {
            @{
                var rootGroup = Model.Groups.FirstOrDefault(group => group.ParentGroupId == null);
            }
            let selectedGroup = "";
            let selectedNode = null;
            let groups = {};
            @foreach(var group in Model.Groups) {
                @:groups["@group.GroupId"] = { delete:false ,id: "@group.GroupId", parent: "@group.ParentGroupId", name: "@group.Title", order: "@group.OrderNum" };
            }
            $('#groupTree').jstree({
                "checkbox": { "three_state": false },
                "core": {
                    "check_callback": true,
                    'data': [
                        @foreach (var item in Model.Groups) {
                        @if (item.ParentGroupId == null)
                            {
                                @:{ "id": "@item.GroupId", "parent": "#", "text": "@item.Title", "state": { "disabled": true } },
                            }
                            else
                            {
                                @:{ "id": "@item.GroupId", "parent": "@item.ParentGroupId", "text": "@item.Title" },
                            }
                        }
                    ],
                    "themes": {
                        "icons": false
                    },
                },
                "plugins": ["themes","dnd"]
            }).on('loaded.jstree', function () {
                $("#groupTree").jstree("open_all");
            }).on("select_node.jstree", function (evt, data) {
                $("#group-name-input").val(groups[data.node.id].name);
                selectedGroup = data.node.id;
                selectedNode = data.node;
                $("#group-name-input").prop('disabled', false);
                $("#save-group-button").prop('disabled', false);
                $("#delete-group-button").prop('disabled', false);
            }).on("move_node.jstree", function (evt, data) {
                groups[data.node.id].parent = data.parent;
                groups[data.node.id].order = data.position;
                $("#SerializedGroupInformation").val(JSON.stringify(groups));
            })

            $("#save-group-button").click(function () {
                if (selectedGroup != "") {
                    groups[selectedGroup].name = $("#group-name-input").val();
                    $("#groupTree").jstree('rename_node', selectedNode, $("#group-name-input").val());
                    $("#SerializedGroupInformation").val(JSON.stringify(groups));
                    $("#group-name-input").prop('disabled', true);
                    $("#save-group-button").prop('disabled', true);
                    $("#delete-group-button").prop('disabled', true);
                    $("#group-name-input").val("");

                }
            })
            $("#delete-group-button").click(function () {
                if (selectedNode.children.length > 0) {

                    swal({
                        title: 'Error!',
                        text: 'The group can not have any children.',
                        icon: 'error'
                    });
                    return;
                }
                groups[selectedGroup].delete = true;
                $("#groupTree").jstree('delete_node', selectedNode);
                $("#SerializedGroupInformation").val(JSON.stringify(groups));
                $("#group-name-input").prop('disabled', true);
                $("#save-group-button").prop('disabled', true);
                $("#delete-group-button").prop('disabled', true);
                $("#group-name-input").val("");
            })
            $("#new-group-button").click(function () {
                var name = $("#new-group-input").val();
                var group = { name: name, order: "0", id: "", parent:"" }
                var node = { id: name, text: name };
                $('#groupTree').jstree('create_node', "@rootGroup.GroupId", node, 'last');
                groups[name] = group;
                $("#SerializedGroupInformation").val(JSON.stringify(groups));
                $("#group-name-input").prop('disabled', true);
                $("#save-group-button").prop('disabled', true);
                $("#delete-group-button").prop('disabled', true);
                $("#group-name-input").val("");
                $("#new-group-input").val("");
            })
        });
</script>

Considering the code above, How could I add the new group as a child to the selected parent node? I have failed at doing so. Can anyone help? I am new to development and I hate to admit that JS is not my strong suit...yet :)

I have tried multiple things and will continue to do so, but this is the original code without my attempts at solving this. Thanks in advance!

Answer 1

Here is a demo to show how to add new item to selected parent: View:

<div id="jstree">
</div>
<button id="create">create button</button>

Js code:

@section scripts{
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var managerTeam = [{
            "id": "m1",
            "text": "M1",
            "children": [{
                "id": "m2",
                "parent": "m1",
                "text": "M2"
            }, {
                "id": "t1",
                "parent": "m1",
                "text": "T1"
            }, {
                "id": "m3",
                "parent": "m1",
                "text": "M3",
                "children": [{
                    "id": "t2",
                    "parent": "m3",
                    "text": "T2"
                }, {
                    "id": "t3",
                    "parent": "m3",
                    "text": "T3"
                }],
                "state": { "opened": true }
            }],
            "state": { "opened": true }
        }];

           
            $('#create').on('click', function () {
                
                var position = 'inside';
                var newNode = { state: "open", data: "New nooooode!" };
                var parent = $('#jstree').jstree('get_selected')[0];
                $('#jstree')
                    .jstree({
                        "core": {
                            "check_callback": true
                        }
                    })
                    .create_node(parent, newNode, position, false, false); 
            });
        });
       
    </script>
}

result: