Why is my 2nd submit button not inheriting the styles even though I have added the css for both ids?

My second submit button is not getting styles the same as the first one

this is my css:

#submit-btn,
#submit-btn-category-month{
  width: 40%;
  padding: 5px;
  margin: 20px auto; /* Center the buttons horizontally */
  font-size: 16px;
  background-color: #000000;
  color: #ffffff;
  border: 1px solid #ffffff; /* Specify the border color */
  border-radius: 5px;
  cursor: pointer;
}

#submit-btn:hover,
#submit-btn-category-month:hover {
  background-color: #333333; /* Darken the background color on hover */
}

this is my js file which is linked

 // Create submit button
  const submitButton = document.createElement("button");
  submitButton.classList.add("submit-btn-category-month");// Add class for styling
  submitButton.id = "submit-btn-category-month";
  submitButton.textContent = "Submit";

I was trying to style this second button but it was not working for me when i inspected it showed me the same id which was weird to me

>Solution :

CSS Selectors

It looks like you are trying to apply the same styles to multiple elements, say 2 buttons here.

But what you are doing wrong is, using id. ids are unique and a single id can be used only once in the same document.

Use a class CSS selector instead, if you want to apply the same style to multiple elements.

• id -> unique
• class -> multiple elements