JSFiddle - React, Tailwind, and code Playground

HTML

<title>Untitled Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
   



<body>

<div id="container">
<input type="button" name="userName" id="Uname" class="nameUser" value="Username"/>
		<h2 id="titlu">Chat</h2>
		
			<div id="popUp">
				<p>Set your username:</p>
				<input type="text" name="setusername" id="userSet">
				<input type="button" id="save" class="pophide" name="save" value="save"/>
				</div>
        <div id="delPop"><p>Do you want to delete this Message?</p>
						<input type="button" id="yes" value="Yes">
						<input type="button" id="no" value="No">
					</div>
			<div id="chat">
				
			</div>
		<textarea id="message" placeholder="Message..."></textarea>
</div>
</body>

CSS

#container{
	width:1000px;
	height:auto;
	margin:auto;
}
#titlu{
	
	width:auto;
	border-bottom:solid #ccc 2px;
	padding:10px;
}

.nameUser{
	margin-top: 13px;
	float:right;
}
#popUp{
	display:none;
	margin:auto;
	width:300px;
	height:100px;
	background-color:#FFFFFF;
	border:solid #ccc 1px; 
}
#chat{
	overflow-y:scroll;
	height:300px;
}
textarea{
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; 
	
}
.mesaj{
	border:solid #ccc 1px; 
	padding:10px;
	margin-bottom:10px;
	
}
#delPop{
	display:none;
	margin:auto;
	width:300px;
	height:100px;
}

JavaScript

$(document).ready(function(){
	$("#Uname").click(function(){
	$("#popUp").show();
	});
	$(".pophide").click(function(){
	$("#popUp").hide(); 

	});
// display previous stored username, if set
		var prevUname = localStorage.getItem("user");
		if(prevUname !== null) {
		$("#Uname").val(localStorage.getItem("user"));
		}

	$("#save").click(function(){
		var valoare = $("#userSet").val();
		if (typeof(Storage) !== "undefined") {
	// Store
		localStorage.setItem("user", valoare);

	// Retrieve
	$("#Uname").val(localStorage.getItem("user"));
		} else {
		$("#Uname").val("Sorry, your browser does not support Web Storage...");
		}
		
	});
     
	$("#message").keypress(function(e) {
		
	 var test = $("#Uname").val()
	 var valmsg = $('#message').val();
	
	if(e.which == 13 && valmsg.trim() == "" ){
	      	e.preventDefault();
            alert('Please type a message to send');
        } else if (e.which == 13) {
            $("#chat").append("<div class='mesaj' >" + test + ':' + valmsg + "</div>");
            $('#message').val('');
        }
    });


$("#chat").on("click", ".mesaj", function(){
	console.log("Merge click clasa");
  	$("#yes").click(function(){
		 $(".mesaj").remove();
		 $("#delPop").hide();
	
		});
	
		$("#delPop").show();
		$("#no").on("click", function(){
			$("#delPop").hide();
		});
	
	});
	
});