JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>

</div>

JavaScript

//Nothing will happen, because the specified
//selector doesn't exist yet.
$("#appended").css("background-color", "red")
$("#appended").click(function(e) {
	alert("This will not work!")
})

//This will work, even though the selector
//does not exist, because the click event is
//triggered on the document and then the target
//of the click is tested against the selector.
$(document).on('click', '#appended', function(e) {
	alert("This will work!")
})


$("div").append($("<button id='appended'></button>"))

//Now that the element exists, we can select it
//for manipulation
$("#appended").text("Click Me!")