JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://build.fluidproject.org/lib/infusion/infusion-custom.js"></script>
<section class="renderer-test">
    <form id="form-id" class="form-class" action="/login">
        <div id="div-id">
            <input class="btn" type="button" name="test" value="" />
        </div>
    </form>
    <span class="display"></span>
</section>

JavaScript

fluid.defaults("fluid.tests.formID", {
    gradeNames: ["fluid.rendererComponent", "autoInit"],
    selectors: {
        btn: ".btn",
        display: ".display",
        form: ".form-class"
    },
    strings: {
        btn: "Get Form ID"
    },
    renderOnInit: true,
    selectorsToIgnore: ["display", "form"],
    protoTree: {
        btn: {messagekey: "btn"}
    },
    listeners: {
        afterRender: {
            "this": "{that}.dom.btn",
            "method": "click",
            "args": "{that}.displayID"
        }
    },
    invokers: {
        displayID: {
            funcName: "fluid.tests.formID.displayID",
            args: ["{that}.dom.display", "{that}.dom.form"]
        }
    }
});
    
fluid.tests.formID.displayID = function (displayElm, formElm) {
    var ID = formElm.attr("id");
    displayElm.text(ID);
};

$(document).ready(function () {
    fluid.tests.formID(".renderer-test");
});