JSFiddle - React, Tailwind, and code Playground

by LightYearsAway

HTML

<h3>Needs</h3>
<input type="text" id="need-input" placeholder="enter text">
<button id="btn1">Need it!</button>
<ul id="need-list">
	<li>a</li>
	<li>b</li>
	<li>c</li>
	<li>d</li>
	<li>e</li>
</ul>

JavaScript

$(document).ready(function(){

	// click button, add to list

	$("#btn1").click(function(){
		$("#need-list").append($("<li>", { text: $("#need-input").val()
		}));
	});

	// click list item to hide

	$('ul').on('click', 'li', function(event) {
		$(this).slideUp();
	});

});