JS：ランキング表で同率順位の場合にセルを結合する処理について

Question

数の多い順にランキングし、tableで表示します。
数が同数（同率順位）の場合は順位のセルを結合して表示しようと思いJSでそのための処理を書いたのですが、なぜか一カ所だけうまくいきません。以下にコードを載せるので、問題と思われる箇所を教えてください。

<div class="rank">
	<p>ランク</p>
	<table>
		<tr>
			<th>順位</th>
			<th>国名</th>
			<th>数</th>
		</tr>
		<% @nations.each_with_index do |f,i| %>
		<tr class="table-tr">
			<td class="table-rank"><%= i+1 %></td>
			<td class="table-name"><%= link_to f.name, tag_path(f.name) %></td>
			<td class="table-count"><%= f.count %></td>
		</tr>
		<% end %>
	</table>
</div>

$(function() {
	var counter = 0;
	var text ="";
	var target="";
	$($('.table-tr').get().reverse()).each(function(){
	  if ($(this).children('.table-count').text() == text) {
		counter++;
		if(target !="")
			target.remove();
	  }
	  else  {
		if(target !="")
			target.attr('rowSpan', counter);
		counter=1;
	  }
	  text = $(this).children('.table-count').text();
	  target = $(this).children('.table-rank');
	});
});

結果：
ランク

順位	国名	数
1	アメリカ	20
中国	20
3	フランス	18
4	イギリス	16
5	オランダ	15
	カナダ	15
7	イタリア	12
8	オーストラリア	11
	インド	11
10	ブラジル	8

「アメリカ」と「中国」は同数のため、「中国」の.table-rankはちゃんとremoveされてはいるのですが、ご覧の通りずれてしまいます。5位や8位のように上下でくっつきません（5位と8位の実際の見た目は、セルが結合され順位が上下中央にちゃんと寄ります）。
なぜ1位だけ機能しないのでしょうか？どなたか詳しい方、JSの記述で問題と思われる箇所をご指摘ください。

Answer 1

問題と思われる箇所を教えてください。

if(target !="")
    target.attr('rowSpan', counter);

恐らく、これです。
数(3列目の値)が変わった時にその下の行のrowSpanを設定していますが、一番上の場合、数が変わる前にループから抜けます。
最初の要素限定の処理を書くか、やり方を変える必要があると思います。

Comments

[Gr.]

moredeepさん
回答ありがとうございます。
最初の要素限定の処理を書いて対処しようと思います。
助かりました。

Answer 2

まずはrowspanしたテーブルを手書きで書き
それに合うようにrubyでrowspan属性付きのtdを発生させる