Arbitrary number of resizable panes (<div>)

Question

The task is to build an interface of several resizable panes separated by splitters:

Panes added in the loop (as far as its number could vary):

//Left pane is single
let newLeftDiv = document.createElement('div');
divContainer.appendChild(newLeftDiv);   
for (let i = 0; i < selectedFiles.length; i++) {
            
    //barPane pane is single
    const newBarPane = document.createElement('div');
    divContainer.appendChild(newBarPane);

    //rightPane
    const newRightPane = document.createElement('div');
    divContainer.appendChild(newRightPane);
        
    const vertSplit = new VerticalSplitter (divContainer,newLeftDiv,newBarPane,newRightPane);
    newLeftDiv = newRightPane;
            
}

Class VerticalSplitter assigns the listener to split bar and manages the height of panes:

startDrag(event) {
    this.startY = event.clientY;
    this.initialTopPaneHeight = this.topPane.offsetHeight;
    this.initialBottomPaneHeight = this.bottomPane.offsetHeight;
    document.addEventListener("mousemove", this.handleDrag.bind(this));
    document.addEventListener("mouseup", this.stopDrag.bind(this));

............

handleDrag(event) {
    if (this.isDragging) {
        const deltaY = event.clientY - this.startY;     
        const newTopPaneHeight = this.initialTopPaneHeight + deltaY;
        this.topPane.style.height = (this.initialTopPaneHeight + deltaY) +'px';
        this.bottomPane.style.height = (this.initialBottomPaneHeight  - deltaY) +'px';
            
    }

it works ok for first two panes (Most Top & pane0), but fails for all others.
e.g for pair pane 2 and 3 despite new height is assigning to the both panes, their values remains unchanged.

Checked that height values attempt to assign during the correct event (mouse move after the mouse down) and to the correct elements (id checked before height changing).