Question: I would like to make the `<li>` element to change the class when I click on it, and when I click one more time to remove it. I have used simple code like this :

```js
var ul = document.querySelector("ul");

ul.addEventListener("click", function() {
  var li = document.querySelector("li");
  li.classList.add("done");
})

ul.addEventListener("dblclick", function() {
  var li = document.querySelector("li");
  li.classList.toggle("done");
})

```

so as you can see on click it goes on and on dbl click it goes off, but it is working on all the `<li>` elements at once.

Answer: 
You need to apply the class to the event's target.

```js
var ul = document.querySelector("ul");

ul.addEventListener("click", (e) => {
  e.target.classList.add("done");
});

ul.addEventListener("dblclick", (e) => {
  e.target.classList.toggle("done");
});
```

```css
.done {
  background: green;
}
```

```html
<ul>
  <li>A</li>
  <li>A</li>
  <li>A</li>
  <li>A</li>
  <li>A</li>
</ul>
```
You have set the event listener on the UL, which will impact all LI inside.
Another options - you can set the event listener on the LI instead.

```js
var lis = document.querySelectorAll("li");

lis.forEach(li => {
    li.addEventListener("click", function(ev){
        ev.target.classList.add("done");
    })

    li.addEventListener("dblclick", function(ev) {
        ev.target.classList.remove("done");
    })
});
```

```css
li {
  color: lightgray;
}

li.done {
  color: green;
}

li {
  cursor: pointer;
}
```

```html
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>
```

<https://jsfiddle.net/3jcbaqgu/17/>