Подсчет персонажей динамически создаваемых текстовых областей с разными идентификаторами и именами

Question

У меня две текстовые области одна под другой

<div class="form-group">
<span id="textarea_feedback1"></span>
<span> ?Characters left</span>
<br>
<textarea name="answer1" id="answer1" rows="4" placeholder="Type your answer here" areaid="1"></textarea>
<hr>
<span id="textarea_feedback2"></span>
<span> ?Characters left</span>
<br>
<textarea name="answer2" id="answer2" rows="4" placeholder="Type your answer here" areaid="2"></textarea>
</div>

Обе текстовые области создаются динамически, и у них разные id и имя attr. В какой-то момент их может быть 2, 3, 4 ... и так далее. Я пытаюсь создать счетчик символов для каждой текстовой области, которая также применяется динамически.

Было бы легко, если бы количество текстовых областей было фиксированным (т. Е. Всегда равным 2).

Но у меня возникают проблемы с поиском способа применения одного и того же сценария JQuery к текстовым областям с другим атрибутом name и id.

Я думал о добавлении уникального атрибута, такого как areaid="", к каждая текстовая область, так что я могу каким-то образом динамически изменить сценарий.

Это сценарий, который у меня есть

$(document).ready(function() {
var text_max = 400;

$('#textarea_feedback1').html('<span>'+text_max + '</span>');

$('#answer1').on('input click keyup', function() {
    var text_length = $('#answer1').val().length;
    var text_remaining = text_max - text_length;

    $('#textarea_feedback1').html('<span>'+text_remaining + '</span>');
});

});

По сути, я думаю, что это должно произойти, это основано на areaid attr также изменяет значение span id="textarea_feedback" и textatea id="answer", чтобы оно соответствовало значению areaid, поэтому скрипт каким-то образом будет работать отдельно от такого количества текстовых областей, которые у меня есть.

Вот jsfiddle

Answer 1

Оберните это span и textarea в элемент, подобный div, чтобы вы могли легко получить доступ к обоим.

;window.onload = function(){
  var text_max = 400;

  for(var tL=document.querySelectorAll('.dummy textarea'), i=0, j=tL.length; i<j; i++){
    $(tL[i]).on('input click keyup', function(){
        var text_length = this.value.length;
        var text_remaining = text_max - text_length;

        this.parentNode.querySelector('span').textContent = text_remaining
    })
  }
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">

<div class = 'dummy'>
<span id="textarea_feedback1"></span>
<span> ?Characters left</span>
<br>
<textarea name="answer1" id="answer1" rows="4" placeholder="Type your answer here" areaid="1"></textarea>
</div>

<hr>

<div class = 'dummy'>
<span id="textarea_feedback2"></span>
<span> ?Characters left</span>
<br>
<textarea name="answer2" id="answer2" rows="4" placeholder="Type your answer here" areaid="2"></textarea>
</div>
</div>

Answer 2

Вы также не можете полагаться на идентификаторы вообще, если вы делаете это так:

$(document).ready(function() {
  var maxLen = 400,
    $formGroup = $(".form-group"),
    $addBtn = $("#add-textarea-btn");

  $addBtn.click(createTextarea);
  // Apply the function on pre-existing textareas
  $("textarea", $formGroup).each(function(i, $el) {
    updateCharCount.call($el);
  });
  // And whenever you edit one
  $formGroup.on("input", "textarea", updateCharCount);

  function createTextarea() {
    $formGroup.append(
      $(
        "<hr />" +
        '<span class="chars-left"></span><span> ?Characters left</span>' +
        '<br /><textarea placeholder="Type your answer here"></textarea>'
      )
    );
    updateCharCount.call($("textarea").last());
  }

  function updateCharCount() {
    var $charLeft = $(this).prevAll(".chars-left").first(); // Get previous chars-left
    $charLeft.text(maxLen - $(this).val().length);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="form-group">
  <span class="chars-left"></span><span> ?Characters left</span>
  <br />
  <textarea placeholder="Type your answer here">There is some content already</textarea>
</div>
<button id="add-textarea-btn">New textarea</button>