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: 
The short answer for computer language is : **No. Multiple IDs are not allowed in html and javascript.**

The long explanation for human language is: It's "allowed" in the sense that your software (VS Code, Dreamweaver, Notepad, whatever) allows you to type it. If you use IDs however you want, your code will eventually break.

A teacher of mine once put it this way: An ID is like the Highlander: There can be only one.

HTML

> 
> What makes attributes of type ID special is that no two such
> attributes can have the same value; whatever the document language, an
> ID attribute can be used to uniquely identify its element.
> 
> 
> 

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

JAVASCRIPT

> 
> The id attribute must be unique within a document.
> 
> 
> 

Source: <https://www.w3schools.com/jquery/sel_id.asp>
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 = ......

```