JSFiddle - React, Tailwind, and code Playground

by kasdega

HTML

<div class="wrapper">
    <div class="entry">
        <label for="fname">First Name:</label>
        <input id="fname" type="text" name="fname" value="foo" />
    </div>
    <div class="entry">
        <label for="lname">Last Name:</label>
        <input id="lname" type="text" name="lname" value="bar"/>
        <div class="tooltip">Users will be listed in alphabetical order by last name</div>
    </div>
</div>

CSS

.tooltip {
    display: none;
}

JavaScript

$(document).ready(function() {
    $("input").click(function() { 
        alert($(this).siblings(".tooltip").text());
    });
    
    // Add middle initial
    var clone = $(".entry:first").clone();
    clone.find("label").text("Middle Initial:");
    clone.append("<div class='tooltip'>Middle Initial</div>");
    $(".entry:first").after(clone);
});