JSFiddle - React, Tailwind, and code Playground

HTML

<form>
    <label>Name: <input type="text" class="full-name"></label>
    <label>Message: <textarea class="message"></textarea></label>
</form>
    
<form>
    <label>Name: <input type="text" class="full-name"></label>
    <label>Message: <textarea class="message"></textarea></label>
</form>

CSS

label{
    display:block;
}
form{
    margin-bottom:50px;
}

JavaScript

$("input.full-name").on("input", function(){
  var full_name = $(this).val();
  var form = $(this).closest("form");
  var message = form.find(":input.message");
  var content = message.val();
  var lines = content.split("\n");
  lines[0] = "Dear " + full_name + ",";
  var new_message = lines.join("\n");
  message.val(new_message);
});