javascript, CSS and PHP folder tree

Question

I am making a folder tree by javascript and PHP.

That is my PHP code:

function getSubDirectories($dirName) {

    $ffs = scandir($dirName);

    unset($ffs[array_search('.', $ffs, true)]);
    unset($ffs[array_search('..', $ffs, true)]);

    // prevent empty ordered elements
    if (count($ffs) < 1)
        return;

    echo '<ul class = "mainFolder">';

    foreach($ffs as $ff) {
        if(is_dir($dirName.'/'.$ff)) {
            echo "<li class = 'subFolder'  ><span class = 'subFolderSpan' onclick = hideFolder(this.id) id = ".$ff.">".$ff;
            getSubDirectories($dirName.'/'.$ff);
        } 
        echo '</span></li>';
    }
    echo '</ul>';
        
    }
    //getSubDirectories("../deneme");
?>

Here my javascript code:

function hideFolder(ID) {

    var elementID = ID;
    
    var element = document.getElementById(elementID);
    var firstChildOfelement = element.firstElementChild;
    console.log(ID);
    //console.log(element.childNodes);

    if (firstChildOfelement.style.display == "none") {
        firstChildOfelement.style.display = "";
    }   
    else {
        firstChildOfelement.style.display = "none";
    }
}

And this is my CSS file

.rootFolder {
    margin: 0;
    padding: 0;
    cursor:pointer;
}

.subFolder {
    /*margin-left: 2.5em;*/
    /* list-style: square inside url("Folder-icon.png");*/

    padding-left:2.5em;
    /*list-style-type: disc;*/
}

.mainFolder {
    padding:0 ;
}

  .subFolderSpan:hover {
      background-color: aquamarine;
  }

My problem is that: when I am on an list item, all parents change their background color. Not just the item that I am on. This is CSS problem. I tried make a unordered list structure without PHP, then the problem did not occur.

a screenshot for CSS problem

when I click a span, onclick affect does not work. I got this error

folderTree.js:7 Uncaught TypeError: Cannot read property 'firstElementChild' of null
    at hideFolder (folderTree.js:7)
    at HTMLSpanElement.onclick (getFolders.php:15)

If I write same code on console, it is working.

Thank for your helps...

Answer 1

I solved the problem. After I edit this section:

 echo '<ul class = "mainFolder">';
    foreach($ffs as $ff){
        
        if(is_dir($dirName.'/'.$ff)){
            echo "<li class = 'subFolder'  ><span class = 'subFolderSpan' onclick = hideFolder(this.id) id = ".$ff.">".$ff;
            getSubDirectories($dirName.'/'.$ff);
        } 
        echo '</span></li>';
    }
    echo '</ul>';

like that:

 echo '<ul class = "mainFolder">';
    foreach($ffs as $ff){
        
        if(is_dir($dirName.'/'.$ff)){
            echo "<li class = 'subFolder'  ><span class = 'subFolderSpan' onclick = hideFolder(this.id) id = ".$ff.">".$ff."</span>";
            getSubDirectories($dirName.'/'.$ff);
        } 
        echo '</li>';
    }
    echo '</ul>';