JSFiddle - React, Tailwind, and code Playground

HTML

<div class="add-item-wrapper">
	<div class="textbox">
		<input id="item-value" type="text">
	</div>
	<div class="add-item-btn">
		<button>Add Item</button>
	</div>
</div>
<div class="error">
	<p>Sorry you have to add something to the list.</p>
</div>
<ul class="container-items">
	
</ul>

<button id="delete-all">Delete All Items</button>

<div id="modal-background"></div>
<div id="modal">
	<div class="container-wrapper">
		<div class="input-text">
			<textarea id="editableText" rows="4" cols="20"></textarea>
		</div>

		<button class="update">Update</button>
		<button class="cancel">Cancel</button>
	</div>

</div>

CSS

a.test {
	font-weight: bold;
	font-size: 60px;
}

.textbox {
	display: inline;
}
.add-item-btn {
	display: inline;
}

#modal-background {
	display: none;
	width: 100%;
	height: 100%;
	background-color: black;
	opacity: .5;
	z-index: 1000;
	position: fixed;
	top: 0;
	left: 0;
}

#modal {
	background-color: whitesmoke;
	border: 1px solid lightgrey;
	width: 400px;
	height: 200px;
	display: none;
	margin: 0 auto;
	z-index: 1001;
	position: relative;
}

#modal .container-wrapper {
	margin: 0 auto;
}

.error {
	color: red;
	height: 50px;
	display: none;
}

.error p {
	margin: 0px;
	padding-top: 5px;
}

JavaScript

$( document ).ready(function() {
	
	var value = "";

	//key up on keyboard event handler
	$("#item-value").keyup(function( event ){
		
		value = $("#item-value").val();

		//if user pressed enter
		if(event.which === 13){
			if( !$(this).val() ){
				$(".error").fadeIn("slow").fadeOut("slow");
			} else {
				$(".container-items").append("<li class='item'>" + value + "</li>");
				$("#item-value").val("");
				value = "";	
			}
		}
	});

	//Submit item using "Add Item" button
	$(".add-item-btn").click(function(){

		value = $("#item-value").val();

		//check to see if empty string
		if ( value === "" ){
			$(".error").fadeIn("slow").fadeOut("slow");
		} else {
			$(".container-items").append("<li class='item'>" + value + "</li>");
			$("#item-value").val("");
			value = "";	
		}

	});		

	//Empty all items in "container-items" class
	$("#delete-all").click( function(event){
		$(".container-items").empty();
	});

	//click an item
	$(".container-items").on('click', '.item', function(event){

		//show modal
		$("#modal-background, #modal").show();

		//get the current item contents and store it in a variable
		var itemContent = $(event.currentTarget).text();

		//populate textarea content with current "itemContent"
		$("#editableText").val(itemContent);

		//when user clicks cancel
		$(".cancel").on("click", function(){
			$("#editableText").val("");
			$("#modal-background, #modal").hide();
			$(".cancel").off("click");
			$(".update").off("click");
		});

		//when user clicks update
		$(".update").on("click", function() {
			var newItemContent = $("#editableText").val();
			$(event.currentTarget).text(newItemContent);
			$("#modal-background, #modal").hide();
			$(".update").off("click");
		});

	});
	
});