How to work with similar elements on the page

There are many instances when a developer re-uses a code in  a webpage. For example "OK" button for a prompt. Instead of scripting it again and again, developers prefer re-using a code which results in presence of similar elements on the page .

By similar elements I mean - Elements with same ID and properties;
for example
<span id="OkButton" type="button" value="OK"/>

Let's assume you have 4 copies of the above mentioned element on the page and you want to work with the third element on the same page .

NOTE- Elements appear on a page in order of Top to Bottom . So the third element means from top to bottom i.e third time we spot the same element.

To solve our problem xpath comes in handy for us

First Element
//span[@id='OkButton'] -- will give you first element from top

Second Element
//span[@id='OkButton']//following::span[@id='OkButton'] -- will give you second element on page from top

Third Element
//span[@id='OkButton']//following::span[@id='OkButton']//following::span[@id='OkButton'] -- thrid element

Fourth Element
//span[@id='OkButton']//following::span[@id='OkButton']//following::span[@id='OkButton']//following::span[@id='OkButton'] -- fourth element


NOTE- Some people suggest indexing here i.e. //span[@id='OkButton'][3] -- to move the third element -- This works only in the case when all the similar elements are present just below each other 

<span id="OkButton" type="button" value="OK"/>
<span id="OkButton" type="button" value="OK"/>
<span id="OkButton" type="button" value="OK"/>
<span id="OkButton" type="button" value="OK"/>

And this situation is very rare . As if we consider our example then every OK button will be placed under its specific set of code .