JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<html>
<head>
<title>Append validation issue</title>
<script>
function dothis(){
    var f = document.createElement("form");
    var i = document.createElement("input");
    i.type = "text";
    i.pattern = "[A-Z]{3}";
	i.oninput = function() {
		this.setCustomValidity('');
	}
    i.oninvalid = function() {
		this.setCustomValidity("watch me break");
	}
    var s = document.createElement("input")
    s.type = "submit";
    f.appendChild(i);
    f.appendChild(s)
    document.getElementById("core").appendChild(f);
}
</script>
</head>
<body>
<div onclick="dothis()">click</div>
<div id="core"></div>
</body>
</html>