JSFiddle - React, Tailwind, and code Playground
HTML
<form>
<div class="row"><label>Name</label><input type="text" id="name"></div>
<div class="row"><select name="reason" type="select" id="reason">
<option value="none">-- Select --</option>
<option value="red">red</option>
<option value="blue">blue</option>
<option value="green">green</option>
</select></div>
<div id="divRed" class="row"><label>Why Do you like red</label><input type="text" id="like_red_why"></div>
<div id="divBlue" class="row"><label>Why Do you like blue</label><input type="text" id="like_blue_why"></div>
<div id="divGreen" class="row"><label>Why Do you like green</label><input type="text" id="like_green_why"></div>
<div class="row"><label> </label><input type="submit" value="Submit"></div>
</form>
CSS
#divRed {display:none}
#divBlue {display:none}
#divGreen {display:none}
JavaScript
$(function() {
$('#reason').change(function() {
var selection;
selection = $('#reason').val()
switch (selection) {
case "red":
$('#divRed').show();
break;
case "blue":
$('#divBlue').show();
break;
case "green":
$('#divGreen').show();
break;
}
});
});