Jquery显示/隐藏只适用于php循环的第一行

我有一个由php while循环生成的表。当单击编辑按钮时，我想替换一个字段(它将包含更新该记录的输入字段)。

对于第一行可以正常工作，但其他行都不能正常工作。我认为，每个php循环后，jquery必须被清除，但不确定这是如何做到的?

如果有人能看到我错过了一些明显的东西，那么请让我知道!

http://jsfiddle.net/QD564/1/

几个行

的例子

<tr>
        <td>2014-06-13</td>
        <td>23:00:00</td>
        <td>WC</td>
        <td>Chile v Australia</td>
        <td style="text-align:center"><span id="12942">2 - 0</span><span id="e12942" style="display:none">aa</span>
        </td>
        <td style="text-align:center">-</td>
        <td><span id="12942"><button id="showEdit" class="btn btn-sm btn-primary 12942" rel="12942">Edit</button></span><span id="e12942" style="display:none"><button id="hideEdit" class="btn btn-sm btn-danger 12942" rel="12942">Cancel</button></span>
        </td>
    </tr>
    <tr>
        <td>2014-06-13</td>
        <td>20:00:00</td>
        <td>WC</td>
        <td>Spain v Holland</td>
        <td style="text-align:center"><span id="12941">2 - 2</span><span id="e12941" style="display:none">aa</span>
        </td>
        <td style="text-align:center">-</td>
        <td><span id="12941"><button id="showEdit" class="btn btn-sm btn-primary 12941" rel="12941">Edit</button></span><span id="e12941" style="display:none"><button id="hideEdit" class="btn btn-sm btn-danger 12941" rel="12941">Cancel</button></span>
        </td>
    </tr>

脚本

  $("#showEdit").click(function() {
  $("span#e"+$(this).attr('rel')).show();
  $("span#"+$(this).attr('rel')).hide();
  $("#showEdit."+$(this).attr('rel')).hide();
  $("#hideEdit."+$(this).attr('rel')).show();
   return false;
});
$("#hideEdit").click(function() {
  $("span#e"+$(this).attr('rel')).hide();
  $("span#"+$(this).attr('rel')).show();
  $("#showEdit."+$(this).attr('rel')).show();
  $("#hideEdit"+$(this).attr('rel')).hide();
   return false;
});

感谢史蒂夫

<tr>
<td>2014-06-13</td>
<td>23:00:00</td>  
<td>WC</td>
<td>Chile v Australia</td>
<td style="text-align:center">
<span class="12942" style="display: inline;">2 - 0</span>
<span class="e12942" style="display: none;">aa</span></td>
<td style="text-align:center"> - </td>
<td><span id="12942" style="display: inline;"><button id="" class="btn btn-sm btn-primary showEdit 12942" rel="12942">Edit</button></span><span id="e12942" style="display: none;"><button id="" class="btn btn-sm btn-danger hideEdit 12942" rel="12942">Cancel</button></span></td>

  $(".showEdit").click(function() {
  $("span#e"+$(this).attr('rel')).show();
  $("span#"+$(this).attr('rel')).hide();
  $("span."+$(this).attr('rel')).hide();
  $("span.e"+$(this).attr('rel')).show();
   return false;
});
$(".hideEdit").click(function() {
  $("span#e"+$(this).attr('rel')).hide();
  $("span#"+$(this).attr('rel')).show();
  $("span."+$(this).attr('rel')).show();
  $("span.e"+$(this).attr('rel')).hide();
   return false;
});