We Keep Coding

Click div with same id

I would like to click on a div but the div in question shares the same ID as another div. I have tested several solutions, especially with xpath, but nothing works.
Is there any other solution to click without selector and xpath ?
html
<div class="modal-button" id="button-grey"> Cancel </div>
<div class="modal-button create-modal-button modal-blue-button" id="button-grey"> Accept </div>
My code :
await page.click('#button-grey')
With this code, It clicks cancel when I'd like it to click accept.
Thank advance for your help

It is possibly clicking cancel because the first div it encounters with the id button-grey is your div that says cancel.
Ids are supposed to be unique. Instead try making button-grey a class and add it as an additional class to both divs. Then give the div that says accept a unique id. Use this unique id within await page.click(yourUniqueID).

As Chris G has mentioned, id attributes are meant to be unique to that specific element.
MDN Web Docs describes an id attribute as the following:
The id global attribute defines an identifier (ID) which must be unique in the whole document. Its purpose is to identify the element when linking (using a fragment identifier), scripting, or styling (with CSS).
Don't use onClick(), but simply change the ids to something more descriptive that are unique. It also makes finding specific elements in your code much easier.
If you cannot change the code, for example if you are web scraping and need them elements, you can use .modal-button:nth-child() to find whatever button you need.

your html is not valid, you can't set serval html tag with the same id.
check your html in [W3C validator]: https://validator.w3.org/#validate_by_input
Transform your "button-grey" id to class

As the comments suggest, id's must be unique.
With this code, It clicks cancel when I'd like it to click accept?
This happens because the browser will use the first element it finds with that id because it only ever expects to find one. In your case, the first one found is for cancel.

It is a faulty HTML code that has multiple items with the same id (which is supposed to be unique). As your question is:
Is there any other solution to click without selector and xpath?
here is a solution with elementHandle.click on the 2nd element [1] with the same id:
const elementHandles = await page.$$('#button-grey')
await elementHandles[1].click() // click 2nd element [1] with the same id
Anyway, XPaths can be useful sometimes if you have to click something based on its text content:
const acceptHandle = await page.$x("//div[#id='button-grey' and contains(text(), 'Accept')]")
await acceptHandle[0].click() // XPath returns an array, the first item [0] is the matching element

Liferay set the id of liferay-ui:search-container-row

I want to set the id of the tr that is the result of the tag liferay-ui:search-container-row, how can I do it?
For Example, the resulting table row is:
<tr id="aui_3_4_0_1_350" class="portlet-section-header results-header">
I want to attach some javascript for the resulting table and I need something to refer to the various table row, like id="aui_3_4_0_1_350".
I could also use the class selector, but I don't know how to set it.

It is not posible to set a customized id value to a search-container-row. Because they get generated based on the input list and Ids need to be unique. However you can access it using a selector starting with the search-container itself. It depends on what you are trying to accomplish.
If you're using jQuery or similar it should be easy since there's a good variety of them: https://api.jquery.com/category/selectors/

If you want to give an element an id you should do it with setAttribute
For example, you first need to get a reference to the element that you want to give the id, with:
var id = document.querySelector("p").setAttribute("id", "idName");
if this is what you're looking for.

how to get part of textbox id in jquery

I have one textbox .the id is account_0__abc.the id will dynamically generted one.my question is how to select the id ending with __abc textboxes in a whole form using jquery?

Try to use attribute ends with selector,
$('[id$="__abc"]')

There are various selectors in jQuery to identify elements based on a part of their id or names. You can specify the element type as well.
Here's an example:
$('input[id$="__abc"]')
This will grab <input> elements with id ending with __abc. Be careful though, if you got multiple ones that match this criteria, you'll end up with a collection. You can iterate through the collection and do stuff to them with a .each() like so:
$('input[id$="__abc"]').each(function(){
// magic
});

If you want to make it more specific such as start with account_ and end with __abc then you can use:
$('[id^="account_"][id$="__abc"]')
https://api.jquery.com/attribute-starts-with-selector/
https://api.jquery.com/attribute-ends-with-selector/

Get the div by partial value of id attribute

I have a div in my form
<div id="s2id_s52dcecf43a846_membership">
<div>
I want to find the div by the name "membership" because the other elements of the id are randomly generated.
How to get the div by just getting the partial value of the div id ?
I want to get it via jQuery/Javascript.
Thanks,
FaisalNasir

If the id starts with "membership" and then comes the random part you can use:
$('[id^="membership"])
You can also use "contains" selector, like
$('[id*="membership"])
If you want to search by the name, you can use
$('[name=membership]');
Keep in mind this might give you more than one element.
You can also check more selectors here

just getting the partial value of the div id
Just try the attribute contains selector,
$('[id*="membership"])
Or the better way would be add a common class to those elements
Please read here to know more about Jquery selectors

Jquery doesn't apply hide() to all of the divs with the same ID

I'm making a site, and the html is displayed through php with data fetched from a database.
I have a foreach() function, so all of the things displayed have the same DIV ID's.
It ends up being like 4 DIVs with the same ID (#content), so the PHP works fine, but I have a jQuery script and when I call the jQuery("#content").hide(); it only hides ONE of the DIV's not all of them, and I want it to hide all of them. Is there something else I have to do?
Thanks.

You should use a class (.class_name), not an id--only one DOM element may have a given ID, otherwise it's invalid HTML. It's reasonable for an ID selector to return only a single element.

IDs on elements on a page should be unique. So every HTML tag you specify should have a different ID. If you want to hide all of a certain element, it might be suitable to add a class to the elements you wish to hide?
e.g.
<div class="divToHide">Content...</div>
<div class="divToHide">Content...</div>
<div class="divToHide">Content...</div>
Then your jquery would be:
$(".divToHide").hide();

That's simply because you cannot have more than one element with a specified ID. IDs are and must be unique. Only one single element with the same element may exist in a DOM.
Failing to follow this rule may result in broken scripts and other horrors.
You can use classes for this purpose.

an ID can only be used ONCE in HTML! because its a id and a id should always be Unique