JSFiddle - React, Tailwind, and code Playground

HTML

<textarea id="watched_textarea" ></textarea>
<div id="output_div"></div>
<div id="output_div1"></div>
<div id="output_div2"></div>

CSS

#output_div {
    white-space: pre-wrap;
}

JavaScript

$( "#watched_textarea" ).keyup( function() {
       
       
       enteredText = $( this ).val();
       numberOfLineBreaks = (enteredText.match(/\n/g)||[]).length;
       characterCount = enteredText.length + numberOfLineBreaks;
       
       //Line Breaks Pressing Enter:
       $( "#output_div" ).html( "Line Breaks (Enter): " + numberOfLineBreaks );
       
       //Characters:
       $( "#output_div1" ).html(  "No. of Characters: " + characterCount );
       
       //New Row:?New lines without enter
       $( "#output_div2" ).html(  "No. of Rows: "  );
       
    });