JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
	<title>Chat </title>
	<style >
	#chat {
		height: 500px;
	}
	#contentWrap{
		display: none;
	}
	#chatWrap{
		float: left;
		border: 1px #000 solid;
	}
	</style>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
	<script type="text/javascript" src="/socket.io/socket.io.js"></script>

	<script>
	$(document).ready(function(){
		jQuery(function($){
			var socket = io.connect();
			var $messageForm = $('#send-messages');
			var $messageBox = $('#message');
			var $chat = $('#chat');
			var $nameForm = $('#setName');
			var $nameError = $('#nameError');
			var $nickname = $('#nickname');
			var $users = $('#users');
			var $message = $('.message');



			$('#contentWrap').on("submit", ".message", function(e){
				e.preventDefault();
				console.log("Test")
			});

			$nameForm.submit(function(e){
				e.preventDefault();
				socket.emit('new user', $nickname.val(), function(data){
					if(data){
						$('#nameWrap').hide();
						$('#contentWrap').show();
					}else {
						$nameError.html("That user name is already taken.");
					}
				});
				$nickname.val('');
			});

			$messageForm.submit(function(e){
				e.preventDefault();
				socket.emit('send message', $messageBox.val(), function(data){
					$chat.append('<b>' + data + '</b> ' + "<br/>");
				});
				$messageBox.val('');
			});

			socket.on('new message', function(data){
				$chat.append('<b>' + data.name + ':</b> ' + data.msg + "<br/>");
			});
			socket.on('usernames', function(data){
				var $input = '';
				var $contentWrap = $("#contentWrap").empty();
				for(i=0; i <data.length; i++){
					if(data[i]){
						$input = $('<input type="button" style="width:200px" class= "button"/></br>');
						$input.val(data[i]);
						$input.appendTo($("#contentWrap"));
					}
				}
			});

			socket.on('whisper', function(data){
				$chat.append('<b>' + data.name + ':</b> ' + data.msg + "<br/>");
			});

			$(document.body).on('click','.button', function(e) {...