Selenium - Multiple anchor - Same ID - Not able to fetch - selenium

Question

I want to click on anchor tag whose class id is clsArrowClick and the same id is on another anchor tag.
<td class="text-center" style="width: 25% !important;">
<td class="arrow" data-toggle="tooltip" data-container="body" title=""
style="width: 25% !important; text-align:center" data-original-
title="Select/Show Data">
**<a id="clsArrowClick" class="clsarrowClick" href="#"
onclick="javascript:OpenAddNewWellPopup(this);">
<i class="fa fa-arrow-right"/>
</a>**
<input id="hdnIsSaved0" class="hdnIsArrowSaved" value="0" type="hidden"/>
</td>
</tr>
<tr id="2">
<td style="width:50%; class=" '="" data-container="body" data-
toggle="tooltip" title="" data-original-title="abcd">abcd</td>
<td class="text-center" style="width: 25% !important;">
<td class="arrow" data-toggle="tooltip" data-container="body" title=""
style="width: 25% !important; text-align:center" data-original-
title="Select/Show Data">
**<a id="clsArrowClick" class="clsarrowClick" href="#"
onclick="javascript:OpenAddNewPopup(this);">
<i class="fa fa-arrow-right"/>
</a>**
<input id="hdnIsSaved1" class="hdnIsArrowSaved" value="0" type="hidden"/>
</td>
I tried list, wait method and simple way everything, but my program throws an error
Exception in thread "main" org.openqa.selenium.ElementNotVisibleException
Like
//WebDriverWait wait = new WebDriverWait(driver,30);
//wait.until(ExpectedConditions.presenceOfElementLocated(By.className("clsArrowClick")));
//driver.findElement(By.className("clsarrowClick"));
driver.findElement(By.xpath("(.//*[#id='clsArrowClick'])[1]")).click();

Answer 1

Try following xpaths might work for second link. I haven't tested that and I don't know the whole html of your page so I said might.
//a[#id='clsArrowClick'][2]
or this one
//input[#id='hdnIsSaved1']../a[#id='clsArrowClick']
or following if you are interested in clickin first link
//td[#class='arrow']/a[#id='clsArrowClick']

Answer 2

In your code you are using presenceOfElementLocated condition before finding the element. An important thing to note is that presenceOfElementLocated only checks for presence of element on DOM, irrespective of it's visibility. You need to make sure that the element you are fetching is visible, so for that you should use ExpectedConditions.visibilityOfElementLocated. visibilityOfElementLocated guarantees that the element is available on the DOM and also visible, so that will help in overcoming the org.openqa.selenium.ElementNotVisibleException you are facing.
So your code should look something like this:
WebDriverWait wait = new WebDriverWait(driver,30);
wait.until(ExpectedConditions.visibilityOfElementLocated(
By.xpath("(.//*[#id='clsArrowClick'])[1]")));
driver.findElement(By.xpath("(.//*[#id='clsArrowClick'])[1]")); //this step can be skipped
driver.findElement(By.xpath("(.//*[#id='clsArrowClick'])[1]")).click();

Answer 3

As mentioned by alessandro-da-rugna, the id should be unique and I think it should be fixed. Selenium also have limitation in terms of find element, if there are two or more elements, it will choose the first one that present, regardless it is visible or not, which click method requires the element to be visible and enabled
To solve this, there are several ways
Make sure your xpath is unique, so you get , for example //a[::following-sibling/input[#id='hdnIsSaved1']] when you find element
As mentioned by jayesh Doolani, you could use
WebElement myElement = wait.until(ExpectedConditions.elementToBeClickable(By.xpath())
myElement.click()
The second way is to use find elements, then find which element that meet your criteria, by checking its attribute, and make sure element clickable, by checks the enable method. Then do click on element that match your criteria

Answer 4

element = driver.findElement(By.xpath("html/body/div[9]/div/div/div[3]/button[2]"));
js = (JavascriptExecutor)driver;
js.executeScript("arguments[0].click();", element);
element = null;
js = null;