JSFiddle - React, Tailwind, and code Playground

HTML

<button>My dog is </button>
<button>My cat is </button>
<button>awesome </button>
<button data-type='link' data-link-to='http://google.com'>google link</button>
<br />
<textarea id='my-area'></textarea>

CSS

#my-area {
    width:300px;
    height:200px;
}

[data-type='link'] {
    background-color:rgb(110, 177, 252);
}

JavaScript

$('button').click(function() {
    // Get the text that is inside the button
    var text = $(this).text();
    
    // Get the data-type attribute value
    var type = $(this).data('type');
    
    // Get the current content of the textarea
    var content = $('#my-area').val();

    // Check whether to add the text normally or add a link
    if (type == 'link') {
        // Retrieve the link address from the button and create the anchor text
        var link_ref = $(this).data('link-to');
        
        // Alter the text variable to be surrounded by tha anchor tag
        // with its specified href
        text = '<a href="' + link_ref + '">' + text + '</a>';
    }
    
    // Set the value of the textarea to the new value
    $('#my-area').val(content + text);
});