JSFiddle - React, Tailwind, and code Playground

HTML

<input id="demooutput" type="text" size="15" value="My Text" name="demo" />
    <span class="demooutput">
        <a href="#" class="button orange"> A</a>
        <a href="#" class="button orange"> B</a>
        <a href="#" class="button orange"> C</a>
        <a href="#" class="button orange"> D</a>
        <a href="#" class="button orange"> E</a>        
    </span>

CSS

select,input{margin:10px}

a{text-decoration: none;}
.button {
    border-radius: 3px 3px 3px 3px;
    box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.3) inset;
    color: #292929;
    cursor: pointer;
    font-family: 'Open Sans',sans-serif !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    height: 28px;
    max-height: 40px !important;
    padding: 4px 14px 5px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
}
.button.orange {
    background:#E3B822;
    border: 1px solid #C79F16;
    padding: 5px 10px !important;
}

JavaScript

$('.demooutput a').click(function(){
        $('#demooutput').val($('#demooutput').val() + ' ' + $(this).html());
        return false;
    });