JSFiddle - React, Tailwind, and code Playground

HTML

<h1 id="title">
My Robot
</h1>
<h2 id="out">

</h2>
<p id='question'>
What is your name?
</p>
<div id="cont">
	<input id="box" />
<button id="subbtn">Click me
</button>
</div>


<select id="feeling">
<option>Select one</option>
<option>Fine</option>
<option>Not So good</option>
<option>Great</option>
</select>

CSS

#feeling {
	display: none;
}

JavaScript

var name =""
$("#subbtn").click(function(){
	name = $("#box").val()
	if(name == "") {
		alert("Please type your name")
		return false
	}
	$("#out").html("Hello " + name)
	$("#question").html("How are you, " + name + " ?")
	$("#title").hide("slow")
	$("#cont").hide("slow")
	$("#feeling").show("slow")
	
})

$("#feeling").change(function(){
		var sel = $(this).val()
		if (sel==="Fine") {
		alert("That is Good")
		}  else if (sel==="Not So good") {
		alert("Sorry to hear that")
		} else if (sel==="Great"){
		alert("Excellent")
		} else {
		alert("please Pick One")
		
		}
		$(this).hide("slow")
})