jquery expand only one textarea of multiple textareas with similar names

I have multiple textareas with same name but different number at the end (e.g. desc1, desc2, desc3,...) I would like to expand ONE of the textarea only when I clicked and focused on that textarea. When that textarea loses focus, it will return to its original size.

<textarea name="desc1" placeholder="Description" class="form-control resizable itemDesc"></textarea>    <textarea name="desc2" placeholder="Description" class="form-control resizable itemDesc"></textarea>    <textarea name="desc3" placeholder="Description" class="form-control resizable itemDesc"></textarea>  

This is the JQuery script I can come up so far:

// when itemDesc textarea is focused, expand      $('textarea[name^="desc"]').focus(function () {          $(this).animate({              height: "200px",              width: "375px"          }, 500);      });        // when itemDesc textarea lose focus, retract      $('textarea[name^="desc"]').blur(function () {          $(this).animate({              height: "50px"          }, 500);      });  

I know it is not working because it is selecting and expanding the first textarea only. How do I expand the textarea that I clicked on using JQuery?

https://stackoverflow.com/questions/65947834/jquery-expand-only-one-textarea-of-multiple-textareas-with-similar-names January 29, 2021 at 10:06AM