How to make a counter variable start from 0 for every single object when function is called?

I am making a simple website with a bunch of divs in a container. When you click on a div it changes a color. When div is pressed 8 times it goes back to a starting color wich is "LightSlateGray". The problem is if someone clicks on another div after clicking on the first one the variable that i used to count the clicks doesnt start from 0.
For example:
First div is clicked and its color changed to red.When the other div is clicked its background color changes to green but I want it to turn red and as user keeps pressing the second div it should turn green the blue then orange etc.

var order = 0;
function changeColour(item)
{
    
    order++;
    if(order == 1)
    {
        item.style.backgroundColor = 'red';
    }
    else if(order == 2)
    {
        item.style.backgroundColor = 'Green';
    }
    else if(order== 3)
    {
        item.style.backgroundColor = 'Blue';
    }
    else if(order == 4)
    {
        item.style.backgroundColor = 'Orange';
    }
    else if(order == 5)
    {
        item.style.backgroundColor = 'Yellow';
    }
    else if(order == 6)
    {
        item.style.backgroundColor = 'Purple';
    }
    else if(order == 7)
    {
        item.style.backgroundColor = 'Black';
    }
    if(order == 8)
    {
        item.style.backgroundColor = 'LightSlateGray'
        order = 0
    }
        
}

I tried to put var order = 0 in the funcion itself but that was just dumb beacuse it made other part of code useless

Is there any way of accomplishing that without creating a ton of variables?

>Solution :

You can either create those variables by using a loop:

const colors = [
  'Red', 'Green', 'Blue', 'Orange',
  'Yellow', 'Purple', 'Black', 'LightSlateGray'
];

document.querySelectorAll('div div').forEach(div => {
  // New 'order' forEach element.
  let order = 0;
  
  div.addEventListener('click', function() {
    this.style.backgroundColor = colors[order];
    order = (order + 1) % colors.length;
  });
});

Try it:

const colors = [
  'Red', 'Green', 'Blue', 'Orange',
  'Yellow', 'Purple', 'Black', 'LightSlateGray'
];

document.querySelectorAll('div div').forEach(div => {
  let order = 0;
  
  div.addEventListener('click', function() {
    this.style.backgroundColor = colors[order];
    order = (order + 1) % colors.length;
  });
});

#container {
  display: grid;
  grid-template: 1fr 1fr / 1fr 1fr;
  gap: 2em;
}

div div {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px;
  aspect-ratio: 1 / 1;
  padding: 3em;
  user-select: none;
}

<div id="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

…or use Array#indexOf() to have JS do that for you (note that I wrote the color names in lowercase) :

const colors = [
  'red', 'green', 'blue', 'orange',
  'yellow', 'purple', 'black', 'lightslategray'
];

document.querySelectorAll('div div').forEach(div => {
  div.addEventListener('click', function() {
    let order = colors.indexOf(this.style.backgroundColor);
    order = (order + 1) % colors.length;
    this.style.backgroundColor = colors[order];
  });
});

Try it:

const colors = [
  'red', 'green', 'blue', 'orange',
  'yellow', 'purple', 'black', 'lightslategray'
];

document.querySelectorAll('div div').forEach(div => {
  div.addEventListener('click', function() {
    let order = colors.indexOf(this.style.backgroundColor);
    order = (order + 1) % colors.length;
    this.style.backgroundColor = colors[order];
  });
});

#container {
  display: grid;
  grid-template: 1fr 1fr / 1fr 1fr;
  gap: 2em;
}

div div {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px;
  aspect-ratio: 1 / 1;
  padding: 3em;
  user-select: none;
}

<div id="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>