Is there a way with either vanilla Javascript or Jquery to select a span class before in the DOM?

Question

I am designing a Squarespace site, so I do not have direct access to the HTML. I would like to add some CSS to the site's drop down menu system. And the way the menu system is setup, it does give not assign ID names, only class names. So, it has one DIV and within that one DIV, it has several SPAN classes. The problem is that all the folder SPANS are all named the same and all the HREF classes are all named the same. What I would like to happen for example, is that if the user clicks on a either "About Us," "Memstaff Team, or "Careers," I would like to add (not replace) a class named "currentFolder" to the "/about" HREF which is the SPAN right before it (which has a class name of "Header-nav-folder-title"). But I do not want to effect the other HREF that comes after, which also has the same exact CLASS name of "Header-nav-folder-title." I would also like to remove the class "currentFolder" when a user clicks on any of the other links so I can repeat the process. I am aware of Jquery's .closest() and .find() but do not know enough on how to use them properly.

<div class="Header-nav-inner">
<span class="Header-nav-item Header-nav-item--folder">
<a href="/about" class="Header-nav-folder-title">About</a>
<span class="Header-nav-folder">                      
<a href="/about-us" class="Header-nav-folder-item">About Us</a>
<a href="/memstaff-team" class="Header-nav-folder-item">MEMStaff Team</a>                                                        
<a href="/careers" class="Header-nav-folder-item">Careers</a>
</span>
</span><span class="Header-nav-item Header-nav-item--folder">
<a href="/job-seekers" class="Header-nav-folder-title">Job Seekers</a>
<span class="Header-nav-folder">
<a href="/submit-a-resume" class="Header-nav-folder-item">Submit a Resume</a>
<a href="/memstaff-jobs" class="Header-nav-folder-item">MEMStaff Jobs</a>
<a href="/referral-bonus" class="Header-nav-folder-item">Referral Bonus</a></span>
</span><a href="/for-employers" class="Header-nav-item">For Employers</a>
<a href="/contact" class="Header-nav-item">Contact</a>
</div>

Answer 1

$('a.Header-nav-folder-item').click(function() {
  //Remove active class from all title elements
  $('.Header-nav-folder-title').removeClass('active');
  // Add class to correct title element
  $(this).parent().siblings('.Header-nav-folder-title').eq(0).addClass('active');
});

// Remove active class when clicking on bottom two links
$('a.Header-nav-item').click(function() {
  //Remove active class from all title elements
  $('.Header-nav-folder-title').removeClass('active');
});

Answer 2

Here is some code that I think may solve your problem. You should set it to run whenever the page navigates (document load probably).

Note that this will only work if the page path exactly matches the link href.

// Get all of the folders
const folders = document.querySelectorAll('span.Header-nav-item--folder');

// Loop through the folders
for (const folder of folders) {
  // Variable for if one of the folder contents is the current page
  let childIsCurrent = false;
  // Get all of the links in the dropdown
  const links = folder.querySelectorAll('a.Header-nav-folder-item');

  // Loop through the links
  for (const link of links) {
    // Compare the link href with our current path
    if (link.href === location.pathname)
      childIsCurrent = true;
  }

  // Find the folder title
  const title = folder.querySelector('a.Header-nav-folder-title');
  // Add or remove the class
  if (childIsCurrent)
    title.classList.add('currentFolder');
  else
    title.classList.remove('currentFolder');
}