JSFiddle - React, Tailwind, and code Playground

HTML

<form method="post" action="" name="cq">
   <select name="subject" id="subject">
      <option value="biology">Biology</option>
      <option value="maths">Maths</option>
      <option value="economics">Economics</option>
      <option value="newSub"> Add New Subject </option>
   </select> 
   <input type="text" name="newSubtxt" id="newSubtxt" style='display:none;'>    
   <button type="button" id="submitBTN">Send</button> 
</form>

JavaScript

$(document).ready(function () {
    $('#subject').change(function (){
    if($('#subject').val()=='newSub')
        $('#newSubtxt').show();
    else
        $('#newSubtxt').hide();
    });
	
	$('#submitBTN').click(function(){
        alert("post to data_handler.php");
		var subject_id = $("#subject").val();
		var newSubtxt = $("#newSubtxt").text();

		$.ajax
		({ 
			url: 'data_handler.php',
			data: {"subject_id": subject_id, "newSubtxt":newSubtxt},
			type: 'post',
			success: function(result)
			{
				alert("Data submitted!");
			}
		});
	});	
	
});