Uniquely count value of multiple textarea

Question

I have 3 textareas, I want to uniquely count the value of each textarea and display it back

$(".textarea").keyup(function(){
  $(".display").text($(this).val().length);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea class="textarea"></textarea>
<div class="display"></div>

<textarea class="textarea"></textarea>
<div class="display"></div>

<textarea class="textarea"></textarea>
<div class="display"></div>

I want to only get the length of the particular textarea that is being typed into.

Answer 1

Use next method to get the immediate next div.display. This method allows us to search through the immediately following sibling in the DOM

$(".textarea").keyup(function() {
  $(this).next(".display").text($(this).val().length);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea class="textarea"></textarea>
<div class="display"></div>

<textarea class="textarea"></textarea>
<div class="display"></div>

<textarea class="textarea"></textarea>
<div class="display"></div>