I want to disable correct hyperlink
<p>This is my last question diabling a hyperlink. The hyperlink does disable but the problem is that is disabling all hyperlinks with the same class. All hyperlinks have the same class, if not then they won't work. But I only want the hyperlink on top (in html) to be only disabled not the hyperlinks in the added rows (jquery code) to be disabled. How can I differenciate the 2 so that not all hyperlinks are disabled?</p>

<p>Below is code for disabling the hyperlink:</p>

<pre><code> $(".showGrid").unbind('click').click(function (event) {
        event.preventDefault();
        return false;
    })
</code></pre>

<p>Below is hyperlink in full html (I want this hyperlink to be disabled):</p>

<pre><code>&lt;table id="optionAndAnswer" class="optionAndAnswer"&gt;
&lt;tr&gt;
      &lt;th colspan="2"&gt;
        Option and Answer
    &lt;/th&gt;
&lt;/tr&gt;
&lt;tr class="option"&gt;
&lt;td&gt;Option Type:&lt;/td&gt;
&lt;td&gt;
&lt;div class="box"&gt;
    &lt;input type="text" name="gridValues" class="gridTxt maxRow" readonly="readonly" /&gt;
    &lt;a href="#" class="showGrid"&gt;[Open Grid]&lt;/a&gt;
&lt;/div&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
</code></pre>

<p>Below is hyperlink in jquery code (Don't Disable this hyperlink):</p>

<pre><code>function insertQuestion(form) {  

var $tr = $("&lt;tr class='optionAndAnswer' align='center'&gt;&lt;/tr&gt;");
 var $options = $("&lt;td class='option'&gt;&lt;/td&gt;");

  $('.gridTxt', context).each( function() {

     var $this = $(this);
     var $optionsText = $("&lt;input type='text' class='gridTxtRow maxRow' readonly='readonly' /&gt;&lt;span href='#' class='showGrid'&gt;[Open Grid]&lt;/span&gt;").attr('name',$this.attr('name'))
                     .attr('value',$this.val())

    $options.append($optionsText);

    });

$tr.append($options);

}
</code></pre>
