Question: I have read this on the internet -  

> 
> **“id” is unique in a page and can only apply to at most one element**
> 
> 
> 

But If I use the selector in CSS it works on every element.

index.html

```
<button id="button1">Button 1</button>
<button id="button1">Button 2</button>
<button id="button1">Button 3</button>
<button id="button1">Button 4</button>

```

style.css

```
#button1{
  color: red;
}

```

output:  

[![enter image description here](https://i.stack.imgur.com/ztuON.png)](https://i.stack.imgur.com/ztuON.png)

But js binds only the first one.

script.js

```
$('#button1').click((value) => {
  console.log("clicked");
});

```

Can anyone explain, Why this is happening? And how it works?

Answer: 
Answering my own question after doing some research.

<https://www.w3.org/TR/CSS21/selector.html%23id-selectors#id-selectors>

The above documentation clearly mentions-

> 
> If an element has multiple ID attributes, all of them must be treated
> as IDs for that element for the purposes of the ID selector.
> 
> 
> 

**That means CSS will treat all of them equally.**

---

But, JavaScript's Document.getElementById() handles it differently.

<https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById>

The above documentation clearly mentions-

> 
> Function returns an Element object describing the DOM element object
> matching the specified ID, or null if no matching element was found in
> the document.
> 
> 
> 

**That means only one element will be returned.**

**Conclusion-** “id” should be unique on a page. but, the browser allows it because HTML is not a strict language.
ID's are unique for each element and same ID cannot be used on multiple elements.
If you really want to do operations using a single block of code to different elements, try using classes

```
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>

```

In css:

```
.button {
//css goes here
}

```

In javascript(jquery):

```
$('.button').onclick = ......

```