how do i change the color one by one to the items there with each click so that the previous one turns green again?

<button>Click!</button>
<ul>
    <li class="green">Home</li>
    <li class="green">faq</li>
    <li class="green">dropdown</li>
    <li class="green">about</li>
    <li class="green">contact</li>
</ul>

let li = document.querySelectorAll('li');

let btn = document.querySelector('button');

for(let i=0; i<li.length; i++) {
    let number = 0;

    btn.addEventListener('click', ()=>{
        li[number++].classList.add('red')
        if(number === li.length) {
            number = 0
        }
    })
}

I wanted a single item to turn red with each click and the previous one to turn green again

You can do it like this if this helps you. As soon as you press the button. Remove the red class from every element first and then add it like you were doing

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

let li = document.querySelectorAll('li');

let btn = document.querySelector('button');

for(let i=0; i<li.length; i++) {
    let number = 0;
    btn.addEventListener('click', ()=>{
      for(let i=0; i<li.length; i++) {
      	li[i].classList.remove('red')
      }
      li[number++].classList.add('red')
      if(number === li.length) {
         number = 0
      }
    })
}

<!-- language: lang-css -->

.green {
   color:green;
}

.red {
   color:red;
}

<!-- language: lang-html -->

<button>Click!</button>
<ul>
    <li class="green">Home</li>
    <li class="green">faq</li>
    <li class="green">dropdown</li>
    <li class="green">about</li>
    <li class="green">contact</li>
</ul>

<!-- end snippet -->

Doing this with JavaScript and one event listener

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

document.querySelector(".menu").addEventListener("click", function (e) {
  // find the li that was clicked
  const clickedLi = e.target.closest("li");
  if (!clickedLi) return;
  
  // see if we had something clicked already
  const selected = e.currentTarget.querySelector(".red");
  if (selected) selected.classList.remove('red');
  
  // update the class on what was clicked
  clickedLi.classList.add('red');
});

<!-- language: lang-css -->

.green {
  background-color: green;
}

li.red {
  background-color: red;
}

<!-- language: lang-html -->

<ul class="menu">
  <li class="green">Home</li>
  <li class="green">faq</li>
  <li class="green">dropdown</li>
  <li class="green">about</li>
  <li class="green">contact</li>
</ul>

<!-- end snippet -->

Using just html and css to make the selections

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.menu input[type="radio"] {
  display: none;
}

.menu input[type="radio"]+label {
  display: inline-block;
  width: 100%;
  background-color: green;
}

.menu input[type="radio"]:checked + label {
  background-color: red;
}

<!-- language: lang-html -->

<ul class="menu">
  <li><input type="radio" name="list" id="li1"><label for="li1">Foo</label></li>
  <li><input type="radio" name="list" id="li2"><label for="li2">Bar</label></li>
  <li><input type="radio" name="list" id="li3"><label for="li3">Baz</label></li>
  <li><input type="radio" name="list" id="li4"><label for="li4">Cheese</label></li>
</ul>

<!-- end snippet -->