Jquery character count for each of many textareas/textboxes

Question

I'm trying to count the number of characters in each textarea on a page. I've decided to use the code below (taken from here), however I am struggling to get it working.

 $(function(){
 $('textarea').on('keyup', function(){
  var wordsLength = $(this).val().length;
  $(this).next().find('').html(wordsLength);
  });
 });

Below are my html and css. I am not able to edit the CSS or Html directly, only using jquery scripts. I'm not sure what I'm missing. Any help would be greatly appreciated:

table {
  display: table;
  border-collapse: separate;
  box-sizing: border-box;
  border-spacing: 2px;
  border-color: grey;
}

input[type=password],
input[type=text],
input[type=file],
input:not([type]),
select,
textarea,
.sp-peoplepicker-topLevel,
.sp-peoplepicker-topLevelDisabled,
.sp-peoplepicker-autoFillContainer,
.ms-inputBox {
  border: 1px solid #b9b9b9;
  background-color: #ffffff;
  background-color: rgba(255, 255, 255, 0.90);
  color: #444444;
}

textarea {
  -webkit-writing-mode: horizontal-tb !important;
  text-rendering: auto;
  color: -internal-light-dark-color(black, white);
  letter-spacing: normal;
  word-spacing: normal;
  text-transform: none;
  text-indent: 0px;
  text-shadow: none;
  display: inline-block;
  text-align: start;
  -webkit-appearance: textarea;
  background-color: -internal-light-dark-color(rgb(255, 255, 255), rgb(59, 59, 59));
  -webkit-rtl-ordering: logical;
  flex-direction: column;
  resize: auto;
  cursor: text;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  margin: 0em;
  font: 400 13.3333px Arial;
  border-width: 1px;
  border-style: solid;
  border-color: -internal-light-dark-color(rgb(118, 118, 118), rgb(195, 195, 195));
  border-image: initial;
  padding: 2px;
}

<table width="100%" role="presentation">
  <tbody>
    <tr>
      <td style="width:100%;"><textarea style="display:none;" origvalue="<p>​I can't speak</p><p>This is a great improvement</p><p><br/>&amp;#160;</p>" spellcheck="true" maxlength="225">&lt;p&gt;​I can't speak&lt;/p&gt;&lt;p&gt;This is a great improvement&lt;/p&gt;&lt;p&gt;&lt;br&gt;&amp;nbsp;&lt;/p&gt;</textarea>
        <div class="ms-rtestate-field ms-rtefield ms-inputBox ms-rtestate-write ms-inputBoxActive" style="min-height:84px;width:75%;" disabled="disabled" contenteditable="true" role="textbox" aria-autocomplete="both" aria-haspopup="true" aria-multiline="true" spellcheck="true" rtedirty="false">
          <p>​I can't spek</p>
          <p>This is <span id="ms-rterangecursor-start" rtenodeid="1"></span><span id="ms-rterangecursor-end"></span>a great immmprovemet</p>
          <p><br>&nbsp;</p>
        </div>
      </td>
    </tr>

  </tbody>
</table>

Answer 1

The main issue is because you've attached the event handler to the textarea yet the visible element that's being typed in to is a contenteditable div. As such you need to correct your selector. As this element is a div you need to use text() or html() to read its content, not val(). It would also make more sense to use the input event for this.

Secondly, you need to fix the selector which targets the element to display the character count in.

$(function() {
  $('div[contenteditable="true"]').on('input', function() {
    var wordsLength = $(this).text().length;
    $(this).siblings('.count').html(wordsLength);
  }).trigger('input');
});

table {
  display: table;
  border-collapse: separate;
  box-sizing: border-box;
  border-spacing: 2px;
  border-color: grey;
}

input[type=password],
input[type=text],
input[type=file],
input:not([type]),
select,
textarea,
.sp-peoplepicker-topLevel,
.sp-peoplepicker-topLevelDisabled,
.sp-peoplepicker-autoFillContainer,
.ms-inputBox {
  border: 1px solid #b9b9b9;
  background-color: #ffffff;
  background-color: rgba(255, 255, 255, 0.90);
  color: #444444;
}

textarea {
  -webkit-writing-mode: horizontal-tb !important;
  text-rendering: auto;
  color: -internal-light-dark-color(black, white);
  letter-spacing: normal;
  word-spacing: normal;
  text-transform: none;
  text-indent: 0px;
  text-shadow: none;
  display: inline-block;
  text-align: start;
  -webkit-appearance: textarea;
  background-color: -internal-light-dark-color(rgb(255, 255, 255), rgb(59, 59, 59));
  -webkit-rtl-ordering: logical;
  flex-direction: column;
  resize: auto;
  cursor: text;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  margin: 0em;
  font: 400 13.3333px Arial;
  border-width: 1px;
  border-style: solid;
  border-color: -internal-light-dark-color(rgb(118, 118, 118), rgb(195, 195, 195));
  border-image: initial;
  padding: 2px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table width="100%" role="presentation">
  <tbody>
    <tr>
      <td style="width:100%;"><textarea style="display:none;" origvalue="<p>​I can't speak</p><p>This is a great improvement</p><p><br/>&amp;#160;</p>" spellcheck="true" maxlength="225">&lt;p&gt;​I cannt spek&lt;/p&gt;&lt;p&gt;This is a great improvement&lt;/p&gt;&lt;p&gt;&lt;br&gt;&amp;nbsp;&lt;/p&gt;</textarea>
        <div class="ms-rtestate-field ms-rtefield ms-inputBox ms-rtestate-write ms-inputBoxActive" style="min-height:84px;width:75%;" disabled="disabled" contenteditable="true" role="textbox" aria-autocomplete="both" aria-haspopup="true" aria-multiline="true" spellcheck="true" rtedirty="false">
          <p>​I cannt spek</p>
          <p>This is <span id="ms-rterangecursor-start" rtenodeid="1"></span><span id="ms-rterangecursor-end"></span>a great immmprovemet</p>
          <p><br>&nbsp;</p>
        </div>
        <span class="count"></span>
      </td>
    </tr>
  </tbody>
</table>