JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" ></script>
 <body>
<p>Type in your name</p>
<input type="text" id="txtName">
<p>Enter a number 1-20.</p>
<input type="text" id="txtNmr">
<input type="button" value="Greet Me!" onclick="greetMe()">
<hr>
<div id="greetings">
  <!-- Section to output the greeting -->
</div>
<div id="errors">
  <!-- Section to output the greeting -->
</div>
<script type="text/javascript">
function greetMe(){
  $('#errors').css("background-color", "white");
  var name = document.getElementById('txtName').value;
  var nr   = document.getElementById('txtNmr').value;
$('#errors').text('');
$('#greetings').text('');
 if (nr > 0 && nr < 21){
for (var counter = 0; counter < nr; counter = counter + 1) {      
    $('#greetings').append("Hello, " + name + "<br />");
  }
  }
  else{
    $('#errors').append("Please Enter A Number Between 1 and 20");
    $('#errors').css("background-color", "yellow");
  }
}
</script>
</body>