Multiple Word Counters For Multiple Divs

Question

For my wordlist website I'm trying to make a automatic word counter for every list. I'm able to count the words of one list but when I add more the counter counts all the lists. I can't find a solution anywhere so all help is greatly appreciated.

JSFiddle link: http://jsfiddle.net/ge7akmzj/

$(function() {
    var text = $('.input').text();
    var wordsCount = text.split(',').length;
    $('.output').html('word count:' + wordsCount);
});

<span class="input">
  These, are, 7, words, as, a, demonstration
</span>
<br>
<br>
<span class='output'></span>
<br>
<br>
<span class="input">
  These, are, 7, words, as, a, demonstration
</span>
<br>
<br>
<span class='output'></span>

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

Answer 1

$(function() {
  $(".input").each(function(element) {
    var text = $(this).text();
    var wordsCount = text.split(',').length;
    $(this).parent().find('.output').html('word count:' + wordsCount);
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">
  <span class="input">
    These, are, 7, words, as, a, demonstrationd, demonstrationd,12,13,15,15
    </span>
  <br>
  <br>
    <span class='output'>
    </span>
</div>
<div class="box">
  <span class="input">
  These, are, 7, words, as, a, demonstration,
  </span>
  <br>
  <br>
  <span class='output'>
  </span>
</div>