jquery 動的にフォームを追加する場合に意図した動作にならないのはなぜでしょうか？

Question

jqueryで動的にフォームを追加し、
フォームのname=""にtest[?][]のように?部分に追加した個数の数字を入れるのが目的です。
結果として望んでいるのが
追加するごとに
test[0][]
test[1][]
test[2][]
・・・・
というように表示されることです。

ですが、現在は
test[0][]
test[4][]
test[8][]
・・・・
というように、カウントが1づつ進むのではなく、4つづつ？進んでいます
inputTestCount = $('.test').length;
でtestの要素数を数えているのですが、追加ごとにひとつしか増えないはずがどうして4つづつふえていくのでしょうか？
またほかに追加フォームで配列に数値を与えるような方法があれば教えて下さい。
よろしくお願い致します

  <div class="container mt-5">
    <table class="table">
      <tbody>
      </tbody>
    </table>
    <button class="btn btn-primary" id="addBtn">追加</button>
  </div>

<script>
    $(function() {
    $('#addBtn').on('click', function() {
      var inputTestCount = $('.test').length;
      const HTMLFORM = `
      <tr>
          <td>testname[${inputTestCount}][]<input type="text" class="form-control test" id="username" name="text" placeholder="comment here"></td>
      </tr>
       `
      $('tbody').append(HTMLFORM);
    });
  });
</script>

Comments

[m.ts10806]

PHPがどう関係あるのか不明なところはありますが、ひとまず、HTMLもご提示ください。

[creative_09]

ちょうど、忘れていたことに気づき、編集中でした。
ありがとうございます。編集しましたのでよろしくお願い致します

[phper.k]

なぜ、tboby の直下に div を入れようとしているのです？
html の文法としておかしくない？

[creative_09]

書き換えました
よろしくお願い致します

[退会済みユーザー]

> inputTestCount = $('.test').length; でtestの要素数を数えているのですが

.test とは何ですか？　test[0][] と testname[${inputTestCount}][] も矛盾してるようですが？

[kei344]

https://jsfiddle.net/af8sh4gL/ 問題が再現しません。

[creative_09]

あれ？わざわざありがとうございます。ほんとうですね・・・再現出来ていますね。。。
再現出来ているのがわかったのでなにかほかの問題を探ってみます。
ありがとうございました。

[Daregada]

実際のHTMLファイルにはtbody(append対象の要素)がもっとたくさん有ったりしませんか?

Answer 1

質問のまま再現出来ていたようなので、別の問題箇所を探ってみます