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>
<div id="output_div3"></div>

CSS

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

JavaScript

var numberOfColumns = 0;
var numberOfLines = 1;

$( "#watched_textarea" ).each(function(){
    	numberOfColumns = $(this).context.cols;
});
    

$( "#watched_textarea" ).keyup( function() {
       
       var eachLine = $( this ).val().split('\n');
       enteredText = $( this ).val();
       numberOfLineBreaks = (enteredText.match(/\n/g)||[]).length;
       characterCount = enteredText.length + numberOfLineBreaks;
       
       if (characterCount > numberOfColumns) {
           numberOfLines = parseInt(characterCount / numberOfColumns) + 1;
       } 
       
       //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: " + eachLine.length);

       $( "#output_div3" ).html(  "No. of Lines: " + numberOfLines);
    });