You will need to flag each respective box and in order to control if it has been clicked at least once.

In this case you can use the class .clicked both as a flag in order to control whether you should reset or not, but for styling as well

var boxes = document.querySelectorAll('.boxes');
var box1 = document.querySelector('#box1');
var box2 = document.querySelector('#box2');
var box3 = document.querySelector('#box3');

function handleColor (box){
    box.classList.add('clicked');

    if (box1.classList.contains("clicked") && box2.classList.contains("clicked") && box3.classList.contains("clicked")) {
        reset();
    }
}

for (let i = 0; i < boxes.length; i++) {
    boxes[i].addEventListener("click", () => handleColor(boxes[i]));    
}

function reset() {
    box1.style.backgroundColor = 'green';
    box2.style.backgroundColor = 'green';
    box3.style.backgroundColor = 'green';

    for (let i = 0; i < boxes.length; i++) {
        boxes[i].classList.remove('clicked');    
    }
}

.boxes {
  width: 200px;
  height: 200px;
  outline: 1px solid black;
}

.boxes.clicked {
  background: red;
}

You need to remember for each box whether it has been clicked or not and then on clicking a box go through all the others to see if they have all been clicked.

There are several ways of remembering: using a CSS class, within JS or within the HTML.

This snippet remembers by adding an attribute 'hasBeenClicked' with value 1 to a box element when it is clicked.

var boxes = document.querySelectorAll('.boxes')
var box1 = document.querySelector('#box1')
var box2 = document.querySelector('#box2')
var box3 = document.querySelector('#box3')

function handleColor(box) {
  box.style.backgroundColor = 'red';
  box.setAttribute('hasBeenClicked', 1);
  let clickCounter = 0;
  boxes.forEach(box => {
    clickCounter += (box.getAttribute('hasBeenClicked') == 1) ? 1 : 0;
  });
  if (clickCounter == boxes.length) {
    reset()
  }
}

for (let i = 0; i < boxes.length; i++) {
  boxes[i].addEventListener("click", () => handleColor(boxes[i]));

}

function reset() {
  box1.style.backgroundColor = 'green'
  box2.style.backgroundColor = 'green'
  box3.style.backgroundColor = 'green'
}

.boxes {
  width: 200px;
  height: 200px;
  outline: 1px solid black;
}

<div class="boxes" id="box1"></div>
<div class="boxes" id="box2"></div>
<div class="boxes" id="box3"></div>