JSFiddle - React, Tailwind, and code Playground

HTML

<input type="radio" class="userInput" value="I'm a radio button that already existed when the page loaded." />Pre-Existing Radio Button
<input type="text" class="userInput userTextInput" value="Text" />
<button type="button" id="addRadio">Add Radio Button</button>
<button type="button" id="addText">Add Text Input</button>

JavaScript

$(document).ready(function() {
    $("#addRadio").click(function() {
           $("html").append("<input type=\"radio\" class=\"userInput\" value=\"I'm a dynamically added radio button!\" />New Radio Button<br />");
    });
    $("#addText").click(function() {
           $("html").append("<input type=\"text\" class=\"userInput userTextInput\" value=\"Text\" /><br />");

    });
    $(document).on("click",".userInput",function() {
        alert($(this).val()); 
    });
    $(document).on("click",".userTextInput",function() {    
        alert($(this).val()); 
    });
});