jQueryのafter()の使い方

Question

検索ボタンを押すと"idwパス"とカラムが追加されますが(2つ目の画像)、
$( '#idw_name0' ).after('<input type="text" class="border_row" id="idw_path">');
でidwパスというカラムの下にinputタグができると思ったのですが、
idw名というカラムの中に2つinputタグができてしまいました（3つ目の画像）。afterメソッドがいけないのでしょうか？

    						<table id="tbl1">
								<tr>
									<td class="border" id="border_idw_name">idw名</td>
									<td class="border" id="border_function">機能</td>
									<td class="border" id="border_scenario">シナリオ</td>
								</tr>
								<tr>
									<td><input type="text" class="border_row" id="idw_name"></td>
									<td><input type="text" class="border_row" id="function"></td>
									<td><input type="text" class="border_row" id="scenario"></td>
								</tr>
   							</table>

$(document).ready(function () {
	$(document).on('click', '.search-btn', function (event) {
		//行の数取得
    	var row_length = $("#tbl1 tbody").children().length;
		console.log(row_length);
		//テーブルの値を取得
		for (var i=0; i<row_length-1; i++) {
			$('#idw_name').attr('id', "idw_name"+i);
			$('#function').attr('id', "function"+i);
			$('#scenario').attr('id', "scenario"+i);
			var idw_name= $("#idw_name"+i).val();
			var func= $("#function"+i).val();
			var scenario= $("#scenario"+i).val();
			//idw名の配列
			_idw_nameArr.push(idw_name);
			//機能の配列
			_functionArr.push(func);
			//シナリオの配列
			_scenarioArr.push(scenario);
		}
		//テーブル作成
		$( '#border_idw_name' ).after('<td class="border" id="border_idw_path">idwパス</td>');
		$( '#idw_name0' ).after('<input type="text" class="border_row" id="idw_path">');
});

Answer 1

idwパスというカラムの下にinputタグができると思ったのですが、

なぜそう思ったのでしょうか。

idw_name0は<input>に振ってあるIDですので、その直後に挿入すれば同じ<td>の兄弟要素になるだけです。