JSFiddle - React, Tailwind, and code Playground

HTML

<form>
    <div><input type="text" name="name" id="name" placeholder="name"/></div>
    <div><input type="text" name="email" id="email" placeholder="email"/></div>
    <div><input type="text" name="inst" id="inst" placeholder="Institution"/></div>
    <div><textarea cols="50" rows="10" name="message" id="message">
    </textarea></div>
    <button id="preview" type="button">Preview</button>
</form>

<div id="preview_text"></div>

JavaScript

$(document).ready(function(){
    var text = "To Whom It May Concern:\n\nPlease supply document: {Item requested}. Retrieved from {Referring Page}.\n\nI will use the requested material only for private study, scholarship or research.\n\nRegards,\n:name:<:email:>";
    $('#message').on('focus', function(){
        text = text.replace(":name:", $('#name').val());
        text = text.replace(":email:", $('#email').val());
        $(this).val(text);
    });
    var text2 = "**This is the text to be sent to the responsible person.**<br /><br />To Whom It May Concern:<br /><br />Please supply document: {Item requested}. Retrieved from {Referring Page}<br /> <br /> I will use the requested material only for private study, scholarship or research.<br /><br />Regards,<br />:name:&lt;:email:&gt;<br /><br />Name: :name:<br />Institution: :inst:";
    $('#preview').on('click', function(){
        text2 = text2.replace(/:name:/g, $('#name').val());
        text2 = text2.replace(":email:", $('#email').val());
        text2 = text2.replace(":inst:", $('#inst').val());
        $('#preview_text').html(text2);
    });
});