複数の入力欄の文字数を個別にカウントしてリアルタイムに表示する方法

Question

前提

メニュー名、時間、料金を登録するシステムを作っています。

<tbody>内の<tr>が動的に増減します。

実現したいこと

 <td><input type="text" name="menu_name[]" placeholder="メニュー名" value="<?php echo $menu[$i][0];?>" class="m-form-text sample"></td>

や

<td><input type="text" name="menu_name[]" placeholder="メニュー名" value="<?php echo $menu[$i][0];?>" class="m-form-text sample"></td>

に入力できる文字数を25文字以内としたいので、入力しながら現在の文字数を確認できるようにしたいです。

何も入力していない時

メニュー文字数：0 / 25

10文字入力すると

メニュー文字数：10 / 25

このように「0」の部分が変化する様にしたいです。

最初のinputに入力した文字数はうまく表示されるのですが、次以降inputに入力しても変化しません。
「0」または最初のinputで表示された数字のまま変わらない状態です。

なぜか「Firefox」のブラウザではうまく表示されます。
アドバイスをいただけると助かります。よろしくお願いします。

該当のソースコード（HTML部分）

<form action="check.php" method="post" enctype="multipart/form-data">
<!-- 料金========================================== -->
  <div class="Form-Item">
  <h3 class="Form-Item-Label"><span class="must">必須</span>メニュー<span class="err"><?php echo $menu_countErr;?></span><span class="err"><?php echo $menuErr;?></span><span class="err"><?php echo $menu_timeErr;?></span><span class="err"><?php echo $menu_priceErr;?></span><span class="err"><?php echo $menu_couponErr;?></span></h3>
  <div class="m-form-talbe">                        
    <table class="menu-table">
      <thead>
        <tr class="lead">
          <th colspan="3"></th>
          <th colspan="2" class="coupon">クーポン適応時</th>
         </tr>
        <tr class="title">
          <th class="menu-name">メニュー名</th>
          <th class="menu-time">時間（分）</th>
          <th class="menu-fee">料金（税込）</th>
          <th class="menu-time">時間（分）</th>
          <th class="menu-fee">料金（税込）</th>
        </tr>
     </thead>
     <tbody class="addInput" id="u1">
         <?php 
            if(is_array($menu) == true){
             for ($i = 0 ; $i < count($menu); $i++){
         ?>
        <tr>
          <td><input type="text" name="menu_name[]" placeholder="メニュー名" value="<?php echo $menu[$i][0];?>" class="m-form-text sample"></td>
          <td><input type="text" name="menu_time[]" placeholder="時間" value="<?php echo $menu[$i][1];?>" class="m-form-text"></td>
          <td><input type="text" name="menu_price[]" placeholder="料金" value="<?php echo $menu[$i][2];?>" class="m-form-text"></td>
          <td><input type="text" name="menu_time_coupon[]" placeholder="クーポン時間" value="<?php echo $menu[$i][3];?>" class="m-form-text"></td>
          <td><input type="text" name="menu_price_coupon[]" placeholder="クーポン料金" value="<?php echo $menu[$i][4];?>" class="m-form-text"></td>
        </tr>
       <?php }
       }else{?>
        <tr>
           <td><input type="text" name="menu_name[]" placeholder="メニュー名" class="m-form-text sample"></td>
           <td><input type="text" name="menu_time[]" placeholder="時間" class="m-form-text"></td>
           <td><input type="text" name="menu_price[]" placeholder="料金" class="m-form-text"></td>
           <td><input type="text" name="menu_time_coupon[]" placeholder="クーポン時間" class="m-form-text"></td>
           <td><input type="text" name="menu_price_coupon[]" placeholder="クーポン料金" class="m-form-text"></td>
       </tr>
       <?php }?>
     </tbody>
    </table>
    <ul class="buttonset">
      <li><input type="button" value="追加" id="add" class='form-submit-button add'></li>
      <li><input type="button" value="削除" id="del" class='form-submit-button del'></li>
    </ul>
   <div class="check-wrapp">
     <p class="cnt_area">メニュー文字数：<span class="now_cnt">0</span> / 25</p>
   </div>
   </div>
   </div>
<!-- 送信========================================== -->
   <div class="submit">
      <p>
        <button type='button' class='form-submit-button gray' onclick='location.href="mgmt_top.php"'>戻る</button>
      </p>
      <p>
        <input type="submit" name="" value="登録" class="form-submit-button pink" />
      </p>
    </div>
</form>

該当のソースコード（jQuery部分）

<!--jQuery本体--> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<!--文字数をカウント-->
<script>
jQuery(function($){
    //入力時のイベント    
    $('.sample').on('input', function(){
        //文字数を取得
        var cnt = $(this).val().length;
        //現在の文字数を表示
        $('.now_cnt').text(cnt);
        if(cnt > 0 && 25 >= cnt){
            //1文字以上かつ25文字以内の場合は黒字
            $('.cnt_area').removeClass('cnt_danger');
        }else{
            //0文字または25文字を超える場合は赤字
            $('.cnt_area').addClass('cnt_danger');
        }
    });
    
    //リロード時に初期文字列が入っていた時の対策
    $('.sample').trigger('input');
    
});
</script>
<!--メニュー追加・削除-->
<script>
window.addEventListener('DOMContentLoaded', ()=>{
add.addEventListener('click',()=>{
const n=u1.querySelector('tr').cloneNode(true);
n.querySelectorAll('input').forEach(x=>x.value="");
u1.appendChild(n);
})
  del.addEventListener('click',()=>{
    if(u1.querySelector('tr:nth-child(2)')){
      u1.querySelector('tr:last-child').remove();
    }
  })
});
document.addEventListener('formdata',e=>{
  const f=e.formData;
  const n=f.getAll('menu_name[]');
  f.delete('menu_name[]');
  const t=f.getAll('menu_time[]');
  f.delete('menu_time[]');
  const p=f.getAll('menu_price[]');
  f.delete('menu_price[]');
  const ct=f.getAll('menu_time_coupon[]');
  f.delete('menu_time_coupon[]');
  const cp=f.getAll('menu_price_coupon[]');
  f.delete('menu_price_coupon[]');
  n.forEach((x,y)=>{
    f.set(`menu[${y}][0]`,x);
    f.set(`menu[${y}][1]`,t[y]);
    f.set(`menu[${y}][2]`,p[y]);
    f.set(`menu[${y}][3]`,ct[y]);
    f.set(`menu[${y}][4]`,cp[y]);
  });
});
</script>

参考にしたページ

https://kinocolog.com/jquery_input_count/

調べたこと

「JavaScript 文字カウント 複数」などで検索したのですが、解決できませんでした

Answer 1

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  txt.addEventListener('input',()=>{
    txt.nextElementSibling.textContent=`メニュー文字数：${txt.value.length} / 25`;
  });
});
</script>
<input id="txt" maxlength="25">
<div></div>

調整

複数の入力欄の合計文字数を表示

<script>
document.addEventListener('input',e=>{
  const n=[...document.querySelectorAll(`[name="menu_name[]"]`)].reduce((x,y)=>x+y.value.length,0);
  document.querySelector('.now_cnt').textContent=n;
});
</script>
<input name="menu_name[]"><br>
<input name="menu_name[]"><br>
<input name="menu_name[]"><br>
<div class="check-wrapp">
<p class="cnt_area">メニュー文字数：<span class="now_cnt">0</span> / 25</p>
</div>

再調整

<script>
document.addEventListener('input', e=>{
  const t=e.target;
  if(t.matches('.txt')){
    t.parentNode.querySelector('.now_cnt').textContent=t.value.length;
  }
});
</script>
<div>
<input class="txt" maxlength="25">
<div>メニュー文字数：<span class="now_cnt">0</span> / 25</div>
</div>
<div>
<input class="txt" maxlength="25">
<div>メニュー文字数：<span class="now_cnt">0</span> / 25</div>
</div>
<div>
<input class="txt" maxlength="25">
<div>メニュー文字数：<span class="now_cnt">0</span> / 25</div>
</div>

Comments

[emi_ono]

ありがとうございます。
<input id="txt" maxlength="25">を複数設定したい場合（設置する個数が変化するのですが）はどうすれば良いでしょうか？
id="txt"の部分をclassに変更？とも思ったのですが、うまくいきません。
nextElementSiblingはclassの値を受け取る事ができないのでしょうか。
アドバイをいただけると助かります。よろしくお願いします。

[yambejp]

複数の入力欄の合計文字数がほしいのでしょうか？

[emi_ono]

合計ではなく、それぞれの文字数を確認したいです。
入力している時に入力中の文字数を確認したいです。

[yambejp]

再調整したので仕様が違うようなら指摘ください

[emi_ono]

うまくできました！！！
本当にありがとうございます。