JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head> 
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<meta http-equiv="content-language" content="en" />
		<title>Get CSV Data</title>
		
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
		<script type="text/javascript">
		$(document).ready(function(){
			$("#notification_email_id").change(function(e){
				var ext = $("input#notification_email_id").val().split(".").pop().toLowerCase();
		
				if($.inArray(ext, ["csv"]) == -1){
					alert('Please upload CSV file');
					return false;
				}
					
				if(e.target.files != undefined){
					var reader = new FileReader();
					reader.onload = function(e){
						var csv_val=e.target.result.split("\r\n");				
						var csv_value=""+csv_val+"".split(",");
						var input_data="";
						for(var i=0;i<csv_value.length;i++){
							var temp=csv_value[i];
							var input_data=input_data+""+temp;
						}
						final_input_data = input_data.slice(0, -1);	
						$("#notification_email").val(final_input_data);
					};
					reader.readAsText(e.target.files.item(0));
				}
				return false;
			});	
		});	
		</script>
	</head>
	<body>	
		<table border="0">
			<tr>
				<td><b>How to read data From CSV file using jquery?</b></td>
			</tr>
			<tr>
				<td><textarea class="form-control" name="notification_email" id="notification_email" rows="4" placeholder="CSV file only" cols="40" readonly="readonly" required></textarea></td>
			</tr>
			<tr>
				<td><input name="notification_email_id" id="notification_email_id" type="file" class="" accept=".csv" /></td>
			</tr>
		</table>
	</body>
</html>