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>
```
Make sure to select the right element when you click on it using `event.target`.

```html
<ul id="my-list">
    <li>Item #1</li>
    <li>Item #2</li>
    <li>Item #3</li>
</ul>

```

```js
const list = document.querySelector('#my-list');
list.addEventListener('click', (event) => {

    // The clicked element
    const target = event.target;

    // Make sure the clicked element is an <li> element
    if (target instanceof HTMLLIElement) {
        // Toggle class
        target.classList.toggle('done');
    }
});

```

Useful documentation: <https://developer.mozilla.org/en-US/docs/Web/API/Event/target>