how to show content in multiple classes with javascript

Question

I am using tinymce for a textarea and i want to cout the characters inside of it. Now i use this code:

<textarea class="tinymce" rows="2" cols="20"></textarea>
<br />
<div class="character_count"></div>
<textarea class="tinymce" rows="2" cols="20"></textarea>
<br />
<div class="character_count"></div>
<textarea class="tinymce" rows="2" cols="20"></textarea>
<br />
<div class="character_count"></div>


<script type="text/javascript">      
    tinymce.init({
        selector: '.tinymce',
        width: 400,
        setup: function (ed) {
            ed.on('keyup', function (e) {
                var count = CountCharacters();
                var x = $(".character_count");
                x[0].innerHTML = "Characters: " + count;
            });
        }
    });
   
    function CountCharacters() {
        var body = tinymce.activeEditor.getBody();
        var content = tinymce.trim(body.innerText || body.textContent);
        return content.length;
    };      
</script>

This works fine, except the number of characters is displayed only in the first div (because of x[0]

is it possible to show, whatever textarea i am typing in, to display the characters in ever div <div class="character_count"></div> ?

Answer 1

Yes, relace this line x[0].innerHTML = "Characters: " + count; with this

x.each( function() { $(this).text("Characters: " + count); });

const p = $("p")
$("input").on("input", function(e) {
  p.each(function() {
    $(this).text(e.target.value)
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" />

<p></p>
<p></p>
<p></p>
<p></p>
<p></p>