Locating using id fails but using link it succeeds to click - ruby

Question

For the following link,
<td style="padding-top:3px" align="center">
GNWL200/WL102
<br/>
<a id="17235-SL-GN-0" href="javascript:jpBook($('#17235-SL-GN-0'),'17235','HSRA','SRT','22-9-2017','SL','GN',3,false,0,0,'S');" tabindex="1">Book Now</a>
</td>
If I uses the link as shown below, it succeeds to click
browser.element(link: "Book Now").click
But if I uses the id as shown below it says element is not visible(not present). May I know why?
browser.link(:id, "17235-SL-GN-0").click
Error
Uncaught exception: element located, but timed out after 30 seconds, waiting for #<Watir::Anchor: located: true; {:id=>"17235-SL-GN-0", :tag_name=>"a"}> to be present
C:/Ruby23/lib/ruby/gems/2.3.0/gems/watir-6.8.4/lib/watir/elements/element.rb:633:in `raise_present'
C:/Ruby23/lib/ruby/gems/2.3.0/gems/watir-6.8.4/lib/watir/elements/element.rb:672:in `rescue in element_call'
C:/Ruby23/lib/ruby/gems/2.3.0/gems/watir-6.8.4/lib/watir/elements/element.rb:684:in `element_call'
C:/Ruby23/lib/ruby/gems/2.3.0/gems/watir-6.8.4/lib/watir/elements/element.rb:136:in `click'
C:/Users/rajagopalan.m/RubymineProjects/SeleniumLearning/Rest/TrainTicketBooking.rb:18:in `<top (required)>'

Answer 1

If link is not visible for regular Click() use jsClick:
"arguments[0].click();"
I'm not sure how it looks like in Ruby, but C#, Java looks simillar to:
JavascriptExecutor executor = (JavaScriptExecutor) driver;
executor.executeScript("arguments[0].click();", element);

Answer 2

I found the solution to my question from #yong comment
Actually there are two element present in the page with same id and the first one is invisible and the second one is actual element which I wanted to click, that's what it's throwing the error.
Here is the html file
<td style="padding-top:3px" align="center">
GNWL203/WL105
<br/>
**<a id="17235-SL-GN-0" href="javascript:jpBook($('#17235-SL-GN-0'),'17235','HSRA','SRT','22-9-2017','SL','GN',3,false,0,0,'S');" tabindex="1">Book Now</a>**
</td>
<td style="padding-top:3px" align="center">
<td style="padding-top:3px" align="center">
<td style="padding-top:3px" align="center">
<td style="padding-top:3px" align="center">
<td style="padding-top:3px" align="center">
</tr>
</tbody>
</table>
<span style="font:11px arial;color:red;float:right">* CURR_AVBL : Current Booking Available | RAC : Reservation Against Cancellation | WL # : Wait List | REGRET/WL : No more booking allowed | AVAILABLE : Available | NOT AVAILABLE : Not Available</span>
<br/>
</div>
</div>
<div id="j_idt413" class="rf-p ">
<div id="enqpanelid1" class="rf-p ">
</div>
</span>
<form id="avlAndFareForm" name="avlAndFareForm" method="post" action="/eticketing/trainbetweenstns.jsf" enctype="application/x-www-form-urlencoded">
<input name="avlAndFareForm" value="avlAndFareForm" type="hidden"/>
<div id="avlAndFareForm:trainSchedPanel" style="visibility: hidden;">
<div id="avlAndFareForm:j_idt480" class="rf-p " style="min-height:383px;width:99%;">
<div id="avlAndFareForm:j_idt480_body" class="rf-p-b ">
<ul id="tabul">
<div id="tabcontent">
<div id="c1" class="container-div">
<div id="j_idt382" class="rf-p ">
<div id="j_idt382_header" class="rf-p-hdr ">
<div id="j_idt382_body" class="rf-p-b ">
<table class="t1" cellspacing="0" cellpadding="4px">
<tbody>
<tr>
<tr>
<td style="text-align: left;padding-left: 1em;">
<td style="padding-top:3px" align="center">
GNWL203/WL105
<br/>
**<a id="17235-SL-GN-0" href="javascript:jpBook($('#17235-SL-GN-0'),'17235','HSRA','SRT','22-9-2017','SL','GN',3,false,0,0,'S');" tabindex="1">Book Now</a>**
</td>