JSFiddle - React, Tailwind, and code Playground

HTML

<p>
    <label>Tag Title *:</label>
    <input type="text" class="tag_title" name="input_tag_title" value="" />
</p>
<p>
    <label>Tag (A-Z; -) *:</label>
    <input type="text" class="tag" name="input_tag" value="" />
</p>

JavaScript

$(".tag_title").blur(
    function() {
        $(".tag").val( $(this).val().replace(/[^a-z\-]/g, '-') );
    }
);