JSFiddle - React, Tailwind, and code Playground

by Ninay is Unknown

HTML

<textarea id='thelist[1].Description'>111111111111111111111222222222222222222222333333333333333333333</textarea>
<textarea id='thelist[2].Description'></textarea>
<textarea id='thelist[3].Description'>111111111111111111111222222222222222222222333333333333333333333</textarea>
<textarea id='thelist[4].Description'>rrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr</textarea>
<textarea id='thelist[5].Description'>111111111111111111111222222222222222222222333333333333333333333</textarea>
<textarea id='thelist[6].Description'>000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000</textarea>

CSS

textarea{
  resize:none;
  overflow:hidden;
}

JavaScript

//Updated with ID.
jQuery.each(jQuery("textarea"), function() {
  //Gets ID of the element
  var ident = $(this).attr('id');
  //This function gives gives height dynamically
  var resizeTextarea = function(el) {
    jQuery(el).css("height", "auto").css("height", el.scrollHeight);
  };
  //Conditions: if the id has a as prefix the statement will be true & executes the code.
  if (ident.slice(0,7) == 'thelist'){
    //Triggered onload
    $( window ).on( "load", function() {
        var ta = document.getElementById(ident);
        resizeTextarea(ta);
     }).attr("rows","1");
    //Triggered after pressing down the key(s) or focus out.
    $('#thelist\\['+ ident.slice(8,9)+'\\]\\.Description').on( "keydown blur", function() {
        resizeTextarea(this);
     }).attr("rows","1");
   
  };
 //  alert(ident.slice(8,9));
});