Saving Nested Sortables with PHP

@dumitrub So why would that solution not work? It does exactly what you are asking. All you need to do is use this code:

const nestedQuery = '.nested-sortable';
const identifier = 'sortableId';
const root = document.getElementById('nestedDemo');
function serialize(sortable) {
  var serialized = [];
  var children = [].slice.call(sortable.children);
  for (var i in children) {
    var nested = children[i].querySelector(nestedQuery);
    serialized.push({
      id: children[i].dataset[identifier],
      children: nested ? serialize(nested) : []
    });
  }
  return serialized
}

Replace the identifier with the attribute on the HTML Element used to identify the item. For you it seems to be an id of some sort. You will have to put the ID on the element as data-id="id" in this case, and set the idenfitier variable in that code to 'id'. You say you want the children of the element to be an array accessible via the children property of a serialized item, which is exactly what that code already does. The nestedQuery should be a CSS selector for the nested list (ie. the nested Sortable list container that is inside the item), Lastly, the root variable should be set to the main Sortable container of the main list. Then you can call serialize and it will return the array.

Perhaps PHP has an issue converting this serialized list to a PHP array? In that case, please share the corresponding PHP code.

If you use ‘parent_id’ logic for it there is an easy way. You can build parent_id’s like that, if you set an data-parent-id to all sortable groups

window.nestedSortableSerialize = (sortable, sortableGroup) => {
    const serialized = [];
    const children = [].slice.call(sortable.children);
    for (let i in children) {
        const nested = children[i].querySelector(sortableGroup)

        // Find the closest sortable group and get it's data-parent-id attribute
        const parentId = children[i].closest(sortableGroup).getAttribute('data-parent-id')
        serialized.push({
            item_id: children[i].dataset['sortableId'],
            parent_id: parentId
        });
        if (nested){
            serialized.push(...nestedSortableSerialize(nested, sortableGroup))
        }
    }
    return serialized
}

Array
(
    [0] => Array
        (
            [id] => 1
            [parent_id] => 0
        )

    [1] => Array
        (
            [id] => 2
            [parent_id] => 0
        )

    [2] => Array
        (
            [id] => 3
            [parent_id] => 2
        )

    [3] => Array
         (
            [id] => 4
            [parent_id] => 2
        )
)

You can have an output like this.