JSFiddle - React, Tailwind, and code Playground

HTML

<div id="append">
    <h2>Using $("#append div").append(button) - Doesn't work as expected: click event is not bound</h2>
    <div></div>
    <div></div>
</div>

<hr />
<div id="appendsingle">
    <h2>Using $("#append div:first").append(button) - Works as expected: but only because we are appending to 1 element</h2>
    <div></div>
</div>

<hr />
<div id="appendto">
    <h2>Using <em>button.appendTo("#appendto div")</em> - Works as expected</h2>
    <div></div>
    
    <div></div>
</div>

JavaScript

var buttonString = "<input type='button' value='Click Me!' />";
var buttonEvent = function(){
    alert("hello");
};


//Does Not Work
var button = $(buttonString).click(buttonEvent);
$("#append div").append(button);


//Does Work - but only because we're appending to a single element
var button2 = $(buttonString).click(buttonEvent);
$("#appendsingle div:first").append(button2);


//Does Work
var button3 = $(buttonString).click(buttonEvent);

button3.appendTo("#appendto div");