I think the easiest way to do this is to add a data attribute to each list item that references the colour, and then add that colour (defined in the CSS) to the the element's classList.

const list = document.querySelector('ul');
list.addEventListener('click', handleClick, false);

function handleClick(e) {
  if (e.target.matches('li')) {
    const { id } = e.target.dataset;
    e.target.classList.add(id);
  }
}

.red { color: red; }
.blue { color: blue; }
.green { color: green; }
li:hover { cursor: pointer; }

<ul>
  <li data-id="red">Red</li>
  <li data-id="blue">Blue</li>
  <li data-id="green">Green</li>
</ul>

Additional documentation

• classList

• matches

• addEventListener

• Destructuring assignment

Or if you don't want to use data attributes pick up the colour from the text content of each list item.

const list = document.querySelector('ul');
list.addEventListener('click', handleClick, false);

function handleClick(e) {
  if (e.target.matches('li')) {
    const { textContent } = e.target;
    const color = textContent.toLowerCase();
    e.target.classList.add(color);
  }
}

.red { color: red; }
.blue { color: blue; }
.green { color: green; }
li:hover { cursor: pointer; }

<ul>
  <li>Red</li>
  <li>Blue</li>
  <li>Green</li>
</ul>

Warning: Your problem here is that XHTML standards do not allow multiple elements with the same ID. This is simply not allows in XML, XHTML, or HTML 5. This is not just bad practice, but code which will most likely break in production as your application gets larger and less maintainable.

Solution 1: Use Classes

If you are using the same ID so that you can style the elements the same way, then you should be using classes:

<li class="color" id="red">Red</li>
<li class="color" id="blue">Blue</li>
<li class="color" id="green">Green</li>

Solution 2: Use querySelectorAll

Using document.getElementById will target only the first element with the specified ID (reference the warning above).

If you still insist on having multiple elements with the same ID, then there is one solution left (although proceed with caution).

document.querySelectorAll will accept a query selector (similar to CSS selectors) as a parameter and find all elements which match the provided query selector. So document.querySelectorAll('li') will return a NodeList (similar to an array) of <li /> elements. You can use the same function to grab all the elements with id="color":

const colors = Array.from(document.querySelectorAll('#color'));

colors.forEach(listItem => {
    const color = listItem.textContent.toUpperCase();

    listItem.addEventListener('click', () => {
        alert(`You clicked on ${color}`);
    });
});

You can checkout this codepen for a demo: https://codepen.io/virajshah21/pen/gOvvqEj