Single page application with file treeview using ajax/php

I am currently working with a web-based document management system, I am creating it as a single page using ajax/php connection. I have my file tree view, that displays the folders and files using this code:

if(isset($_GET['displayFolderAndFiles'])){

    function listIt($path) {
        $items = scandir($path);            
        foreach($items as $item) {

            // Ignore the . and .. folders
            if($item != "." AND $item != "..") {
                if (is_file($path . $item)) {
                    // this is the file
                } else {
                    // this is the directory

                    // do the list it again!

                    echo "<li><span class='fa fa-chevron-right caret'></span><button class='btn-der' id='directory".$id."' onclick='directoryAction(this);' value='".$path.$item."/'>".$item."</button>";
                    echo "<ul class='nested'>";
                    listIt($path . $item . "/");
                    //echo("<input type='text' value='".$path.$item."/'>");
                    echo "</ul></li>"; 

                }
                $id++;    
            }
          }
        }

        listIt("./My Files/");
}

with this code it is hard for me to manipulate the tree view. I use ajax to get the result.

What I want is to reload the tree view when i add, delete file or folder. I also want to load the page once I do some queries in my application without refreshing the page.

I want to have the functionalities like the sample image, the application is FileRun.

Can someone recommend or suggest some ways to address my problem. Will I use some javascript library or else?

Reference/Sample: Web-based Document Management System (FileRun)