JSFiddle - React, Tailwind, and code Playground

by David Buzatto

HTML

Mudando tudo:
<div id="box-options">
  <ul id="options">
    <li class="optionMudarTudo option" onclick="clicarEMudarTudo(event)">1</li>
    <li class="optionMudarTudo option" onclick="clicarEMudarTudo(event)">2</li>
    <li class="optionMudarTudo option" onclick="clicarEMudarTudo(event)">3</li>
    <li class="optionMudarTudo option" onclick="clicarEMudarTudo(event)">4</li>
    <li class="optionMudarTudo option" onclick="clicarEMudarTudo(event)">5</li>
  </ul>
</div>

Mudando por id:
<div id="box-options">
  <ul id="options">
    <li class="option" id="li1" onclick="clicarEMudarPorId(event)">1</li>
    <li class="option" id="li2" onclick="clicarEMudarPorId(event)">2</li>
    <li class="option" id="li3" onclick="clicarEMudarPorId(event)">3</li>
    <li class="option" id="li4" onclick="clicarEMudarPorId(event)">4</li>
    <li class="option" id="li5" onclick="clicarEMudarPorId(event)">5</li>
  </ul>
</div>

Mudando por dataset (data-cor):
<div id="box-options">
  <ul id="options">
    <li class="option" data-cor="#f75488" onclick="clicarEMudarPorDataset(event)">1</li>
    <li class="option" data-cor="#cc54f7" onclick="clicarEMudarPorDataset(event)">2</li>
    <li class="option" data-cor="#5467f7" onclick="clicarEMudarPorDataset(event)">3</li>
    <li class="option" data-cor="#54f7df" onclick="clicarEMudarPorDataset(event)">4</li>
    <li class="option" data-cor="#54f777" onclick="clicarEMudarPorDataset(event)">5</li>
  </ul>
</div>

CSS

.option {
  cursor: pointer;
}

JavaScript

function clicarEMudarTudo( event ) {
  
  document.querySelectorAll( ".optionMudarTudo" ).forEach( opt => {
  	opt.style.backgroundColor = "#fb7413";
  });
  
}

function clicarEMudarPorId( event ) {
	
  let cores = {
  	"li1": "#878787",
    "li2": "#9e9e9e",
    "li3": "#b3b3b3",
    "li4": "#d1d1d1",
    "li5": "#ebebeb"
  };
  
  let li = event.target;
  let liId = li.id;
  
  li.style.backgroundColor = cores[liId];
  
}

function clicarEMudarPorDataset( event ) {
	
  let li = event.target;
	let cor = li.dataset.cor;
  li.style.backgroundColor = cor;
  
}