Hover-effect on another list

I'm not sure if I'm understanding your question correctly. You've got working code that targets a specific list when you mouseover. This works, and only targets the specific list you've targeted. (Make sure you've commented out the first section.)

let ul = document.getElementsByTagName('ul')[1]

But what you're trying to do is to target the list you're mousing over, without hard-coding in the different lists?

If so, I would look at things like event.target, maybe using closest or children to chain on to that. Remember that you'll need to bind the listener to each element, just like you did in the first section.

It's been awhile since I've done vanilla JS, but I've got an ugly solution if you still feel stuck and would like to walk through some potential code.

Edit - Code Update

Here is one possible solution for making individual list items upper case on mouseover.

// Get all the list item elements, like you did before.
let list = document.getElementsByTagName('li');

for(var i = 0; i < list.length; i++){ // Bind the event to each li element.
  list[i].addEventListener('mouseover', () => {
    // When you mouseover an li, upper case the text for only the target li.
    event.target.textContent = event.target.textContent.toUpperCase();
  });
};

As a little bonus that makes testing easier, you can also do a mouseout event listener so that it changes back to lower case when your mouse exits the area.

for(var i = 0; i < list.length; i++){ // Still bind it to each element.
  list[i].addEventListener('mouseout', () => { 
    // When your cursor leaves the element, lower case the text.
    event.target.textContent = event.target.textContent.toLowerCase();
  });
};

MDN event.target Documentation

MDN mouseout Event Documentation