JSFiddle - React, Tailwind, and code Playground

by joed

HTML

<p>Type into this box and click its button.  Should get a change and click.</p>
<div>
  <input id="rawIn" type="text"/>
  <button id="rawButton" type="button">Hey</button>
</div>
<p>Type into this box and click its button. Should get a change and click.</p>
<div>
  <input id="jqIn" type="text" />
  <button id="jqButton" type="button">Hey</button>
</div>

JavaScript

function rawChange() {
  document.body.appendChild(document.createTextNode("change "));
}
function rawClick() {
  document.body.appendChild(document.createTextNode("click "));
}
function jqChange() {
  $("#jqButton").text("changed");
}
function jqClick() {
  $("body").append("click ");
}
$(document).ready(function() {
  document.getElementById('rawButton').addEventListener("click", rawClick, false);
 document.getElementById('rawIn').addEventListener("change", rawChange, false);
  $('#jqButton').on("click", jqClick);
  $('#jqIn').on('change', jqChange);
});