JSFiddle - React, Tailwind, and code Playground

HTML

<textarea id="textarea1" readonly="readonly" class="copyable">Totally readonly, cannot be copied</textarea>

<div>
    <a href='#' class="test-link">Test link</a>
</div>

CSS

textarea,
.textarea {
    border: 1px solid #ccc;
    padding: 3px;
    font-size: 12px;
    width: 300px;
    height: 100px;
    overflow: auto;
}

JavaScript

$('textarea[readonly]').removeAttr('readonly').each(function () {
    var $this = $(this);
    $this.hide().after('<div data-textarea="'+$this.attr('id') +'" class="textarea">' + $this.val() + '</div>');
}).on('textareachange', function () {
    var $this = $(this);
    $('[data-textarea="'+$this.attr('id')+'"]').html($this.val());
});

$('.test-link').on('click', function () {
    $('textarea').val('test').trigger('textareachange'); 
});