JSFiddle - React, Tailwind, and code Playground

HTML

<textarea></textarea>
<div id="button">Click Here</div>

CSS

textarea {
    height: 80px;
    width: 150px;
    background-color: #bbb;
    resize: none;
    border: none;
}
#button {
    width: 150px;
    background-color: #333;
    color: #eee;
    text-align: center;
}

JavaScript

$(function() {
    var textarea = $("textarea");
    
    textarea.val("Hello\nStack\nOverflow!\nThere\nAre\nLots\nOf\nGreat\nPeople\nHere");
    
    $("#button").click(function() {
        var top = textarea.scrollTop();
        textarea.val(textarea.val() + "!");
        textarea.scrollTop(top);
    });
    
    textarea.scrollTop(9999).focus(); // Arbitrary big enough number to scroll to the bottom
});