JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" />

<ul id="selector-file">
   <ul>
      <li class="folder">
         <i class="fa fa-folder"></i> myfiles
         <ul>
            <li class="folder">
               <i class="fa fa-folder"></i> Backup
               <ul>
                  <li class="folder">
                     <i class="fa fa-folder"></i> one
                     <ul>
                        <li class="file"><i class="fa fa-file"></i> test1.dat</li>
                     </ul>
                  </li>
                  <li class="folder"><i class="fa fa-folder"></i> two</li>
               </ul>
            </li>
         </ul>
      </li>
   </ul>
</ul>

JavaScript

$('#selector-file').on('click', 'li', function() {  
        var item = $(this);
        var path = [];
        if (item.is('.file'))
        {
            $(this).css("background-color", "#F5F5F5")
            path.push(item.text().trim());
        } else {
            path.push(item.find('> .folder').text().trim() + '/');
        }
        var parents = item.parents('#selector-file li');
        path = parents.map(function() {
            return $(this).find('> .folder').text().trim();
        }).get().reverse().concat(path);

      selectedFile = path.join('/');
      console.log(selectedFile)
      return false;
})