nestedSortable | jQuery plugin that extends Sortable UI functionalities | Grid library

I have the following classes,

User:

i try to get the order of a nested list that can be ordered with SortableJS. My list looks like this:

I have this sortable item list using jQuery UI Sortable, which is also able to nest items.

Each of these items contains toggable content, it will slide down when clicking on an item.

However, when clicking on the parent item when nested, instead of only toggling the parent content it's also toggling the child's content.

I've been trying to figure it out in my Jquery script but haven't been able to figure it out. I reproduced my issue in this fiddle:

https://jsfiddle.net/es3hbdnm/33/

Also HTML:

I'm creating a dynamic navigation tree structure using jQuery UI sortables and nested sortable.

When the items are relocated, I'm trying to iterate over each branch and add a button at the bottom if it doesn't have one.

I'm having some problems with creating a recursive function to iterate over each branch. If I use .children('.ui-menu-item-branch'), it doesn't seem to find the sub-branches. If I use .find('> .ui-menu-item-branch'), it finds all sub-branches.

How should I amend the code to iterate over each branch only once?

I have modified a js function of odoo website. The code looks like below -

I am trying to use Selenium's Action class to drag and drop a source element that is inside a JQuery nested sortable list to another element. I have used the standard dragAndDrop method as well as broken it down to clickAndHold, moveToElement, and release but neither of those work. I even tried using the source elements inner child to drag but the result is the same.

When I run the script the test comes back as passed so I know the elements are being found and the selectors are valid. Selenium thinks the drag and drop operation worked but when I observe the test, I see no action what so ever. I have confirmed with a few developers that I am indeed targeting the right source element to drag as far as the DOM is concerned.

EDIT: I have tried using the build() method before performing the action and even slowed down the test by sleeping the thread but the result is the same.

EDIT 2: I have also added the destination where the source is needed to be dropped into. I should also mention the source element (on drag event) has a sortable-ghost object created and THAT object what is copied into the destination element container when a user manually drags it into the destination element.

This is the destination container I am trying to drag to.

I'm using nestedsortable jQuery (http://mjsarfatti.com/sandbox/nestedSortable/). In the list, the user can drag and drop the items until level 3. Basically, the item can have father and grandfather.

If the item don't have child, it's going to append the span element, that include the input file. And if the item is the father or grandfather, cannot show the input file element. So, when I drag and drop an item within another item (father), this is works. But when I drag and drop an item within the item dropped previously, the input file don't desappears.

JSFiddle

I've posted 5 images to understand better.

For example:

The code:

I'm using knockout-sortable and my goal is nestedSortable behaviour. I have a working light-weight fiddle example I've made, and everything is ok except one thing: I can't move children to element who doesnt have it initially.

Child elements prints there:

This is the fiddle: https://jsfiddle.net/107bx70o/3/