javascript（jQuery）で複数のテキストエリアの文字数をカウントしたい

題名の通り、複数のテキストエリアの文字数をカウントしたいです。現状、スクショのように1つのテキストに対する文字数しか取得出来ていません。

html
1{foreach from=$items item=i}
2<tr>
3    <td class="item_detail"><textarea name="item_detail" required>{$i.item_detail}</textarea><span class="counter"></span></td>
4    <td></td>
5    <td></td>
6    ...
7</tr>
8{/foreach}

javascript
1<script>
2$(function(){
3    function countInputText(input) {
4        // 現在の文字数を取得
5        const currentLength = $(input).val().length;
6        const counter = $(".counter");
7        counter.html(currentLength);
8
9        console.log(currentLength);
10        console.log(counter);
11    }
12
13    // ページ表示時に文字数をカウントして表示
14    $('textarea[name="item_detail"]').each(function(){
15        countInputText($(this));
16    });
17
18    // フォーム入力時に文字数をカウントして表示
19    $('textarea[name="item_detail"]').on('keydown keyup keypress change',function(){
20        countInputText($(this));
21    });
22});
23</script>

現状、1681,1681,1681...と同じ数字が出ていますが、currentLengthで取得したそれぞれの数字（1551,1538,1625...）を割り当てたいです。宜しくお願いします。

行動規範の内容に同意します

回答1件

ベストアンサー

これでどうでしょう。

js
1$(function(){
2    function countInputText( input ) {
3        // 現在の文字数を取得
4        const currentLength = $( input ).val().length;
5        const counter = $( input ).next( '.counter' );
6        counter.html( currentLength );
7
8        console.log( currentLength );
9        console.log( counter );
10    }
11
12    // フォーム入力時に文字数をカウントして表示
13    $( 'textarea[name="item_detail"]' ).on( 'keydown keyup keypress change', function() {
14        countInputText( this );
15    } ).trigger( 'change' );
16} );