At index [1], both elements are identified, but at index [2], nothing is identified. The key difference between the two is that one has display:none, and the other has display:block. However, their involvement in determining these fields is minimal due to Xpath as the fields are sourced differently.
Despite having identical elements, these divs have a document attribute which means the Xpath for them does not start with the div itself but rather after a certain part of the document. Below is an example code snippet:
<div name='some-name' style="display:none;">
...
<!document>
<div id='some-id'>
....
<button name='some-name-2'>some-button-name</button>
....
</div>
...
</div>
<div name='some-name' style="display:block;">
...
<!document>
<div is='some-id'>
....
<button name='some-name-2'>some-button-name</button>
....
</div>
...
</div>
Thus, their Xpath expressions will look something like:
[id='some-id']/...../button
Selecting ([id='some-id']/...../button)[1] retrieves both elements.
But selecting ([id='some-id']/...../button)[2] retrieves none of them.
Update
In this scenario, I had two iframes and the issue was due to difficulty in switching between them. This has been resolved now. Thank you!