cloneされた行の配列番号を連番にしたい

Question

■input要素「suryo」のフォーカスが外れたら1行追加するプログラムなのですが、追加された行の配列番号が最終行（クローン元）と同じ番号になってしまいます。javascriptでcloneする際に追加された行分行番号をプラスし、連番にしたいです。お手数ですが、ご教示お願い致します。

■下記のように、クローン処理で追加した行の配列番号が連番になるようにしたいです。（追記）

<tr>
<td><input type='text' name='h_code[1]' class='h_code' value = '$h_code[1]' ></td>
<td><input type='text' name='name[1]' class='name' value = '$name[1]' ></td>
<td><input type='text' name='suryo[1]' class='suryo' value = '$suryo[1]' ></td>
</tr>
<!-- クローン追加x行目 -->
<tr>
<td><input type='text' name='h_code[2]' class='h_code' value = '$h_code[2]' ></td>
<td><input type='text' name='name[2]' class='name' value = '$name[2]' ></td>
<td><input type='text' name='suryo[2]' class='suryo' value = '$suryo[2]' ></td>
</tr>
<!-- クローン追加x行目 -->
<tr>
<td><input type='text' name='h_code[3]' class='h_code' value = '$h_code[3]' ></td>
<td><input type='text' name='name[3]' class='name' value = '$name[3]' ></td>
<td><input type='text' name='suryo[3]' class='suryo' value = '$suryo[3]' ></td>
</tr>
・・・・追加行数($count)分・・・・・

<!-- クローン追加x行目 -->
<tr>
<td><input type='text' name='h_code[$i]' class='h_code' value = '$h_code[$i]' ></td>
<td><input type='text' name='name[$i]' class='name' value = '$name[$i]' ></td>
<td><input type='text' name='suryo[$i]' class='suryo' value = '$suryo[$i]' ></td>
</tr>

    $('input.suryo').on('blur', function(){
      $('#tbl tbody tr:last-of-type').clone(true,true).find('input').val('').end().appendTo('#tbl tbody');
    });

■下記全文

<?PHP
$h_code=filter_input(INPUT_POST,'h_code',FILTER_DEFAULT,FILTER_REQUIRE_ARRAY);
$name=filter_input(INPUT_POST,'name',FILTER_DEFAULT,FILTER_REQUIRE_ARRAY);
$suryo=filter_input(INPUT_POST,'suryo',FILTER_DEFAULT,FILTER_REQUIRE_ARRAY);
$count=is_array($h_code)?count($h_code):1;

echo"
<script>
document.addEventListener('formdata',e=>{
  e.formData.append('focus',document.activeElement.name);
});
</script>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js'></script>
<script>
$(function(){
    $('input.suryo').on('blur', function(){
      $('#tbl tbody tr:last-of-type').clone(true,true).find('input').val('').end().appendTo('#tbl tbody');
    });
});
</script>

<form method='POST'>
<table id='tbl'>
<thead>
<tr><th>コード</th><th>名前</th><th>数量</th></tr>
</thead>
<tbody>
";

for($i=0;$i<$count;$i++){

    echo "
    <tr>
    <td>".$i."<input type='text' name='h_code[]' class='h_code' value = '$h_code[$i]'  ></td>
    <td><input type='text' name='name[]' class='name' value = '$name[$i]'  ></td>
    <td><input type='text' name='suryo[]' class='suryo' value = '$suryo[$i]'  ></td>
    </tr>
    ";

}

echo"
  </tbody>
</table>
<input type='submit' value='保存'>
</form>
";
?>

Comments

[Waki285]

PHPタグもつけたほうがよろしいかと。
(質問を編集してタグを付け加えることができます)

[test1234]

失礼しました。追加いたしました。

[int32_t]

質問内の画像は実際にやりたいことではない、ということですか?
何を連番にしたいのでしょうか?

[test1234]

配列の番号です。例として$h_code[$i]の$iは追加した行分、配列の番号が0，1，2，3・・と続くはずですが、上記cloneで追加するとクローン元の配列番号が引き継がれてしまいます（画像の番号です）。それを追加した行数順に連番にしたいです。

[int32_t]

まだ何が連番になってほしいのか理解できません。
配列はPHPにだけ存在して、クライアントにはありませんよね? 「配列の番号」は「<td>".$i」で行の先頭につけているもの以外にクライアントには渡してないように見えるのですが。

クローン処理によって、どういうHTMLが追加されてほしいのか書いていただけますか?

[test1234]

質問文に追加したいHTMLを追記しました。nameとvalueをclone処理でも連番になるようにしたいです。

[int32_t]

追加情報は質問文に追記してください。

クライアント側で項目を増やす話をしているのに「value = '$h_code[$i]' 」とPHPの変数名のようなものが出てくるのがおかしく感じます。ここはユーザに '$h_code[$i]' という値が入った <input> を見せたいのですか?

[test1234]

＞＞ここはユーザに '$h_code[$i]' という値が入った <input> を見せたいのですか?
はい、おっしゃる通りです。

Answer 1

下記を参考に解決しました。
https://www.flatflag.nir87.com/index-2026

Answer 2

こういうのはCSSでやりましょう。

PHP:
<td>".$i."<input ... を <td><input ... に修正

スタイルシートを追加:

:root {
  counter-reset: item -1;
}

#tbl tbody td:nth-of-type(1):before {
  content: counter(item);
  counter-increment: item;
}

Comments

[test1234]

あ、すみません、今表示している番号は仮で配列番号を表示しているだけで、あくまで配列番号を連番にしたいという意味です。なので、「<td>".$i."<input ...」の「".$i."」は何れ消します。