JSFiddle - React, Tailwind, and code Playground

HTML

<a href="javascript:;" id="scroll_enable_disable" class="disabled">Habilitar scroll Automatico</a>
<textarea id="msg" cols="30" rows="10"></textarea>
<button id="send_msg">Enviar</button>

<ul id="list_msg">
    
</ul>

CSS

#list_msg{
    width: 200px;
    height: 250px;
    overflow: auto;
    background: #f2f2f2;
    padding: 0;
}

#list_msg li{
    list-style: none;
    padding: 10px;
    border-bottom: 1px solid #CCC;
    
}

#scroll_enable_disable{
    display: block;
}
}

JavaScript

$(document).ready(function(){
    var msg = $("#msg");

    $("#send_msg").click(function(){
        if(msg.val().length >= 1){
            $("#list_msg").append("<li>"+msg.val()+"</li>")
            msg.val("").focus();
        }
    })
    
    $("#scroll_enable_disable").click(function(){
        var t = $(this);
       t.toggleClass("enabled")
        
        if(t.hasClass("enabled")){
            t.text("Desabilitar scroll Automatico")
        }else{
            t.text("Habilitar scroll Automatico")
        }
    })
})