JSFiddle - React, Tailwind, and code Playground

by Muhammad Farid

HTML

<div id="box">
		<form>
			<p>
				<label>The Name</label>
				<input type="text" id="name">
			</p>
			<p>
				<label>Numper phone</label>
				<input type="text" name="num" id="num">
			</p>
			<input type="submit" id="button" value="submit">
			<a href="javascript:clear();">clear all</a>
		</form>
	</div>
	<div id="display_data">
	</div>

JavaScript

function doFirst () {
			var button = document.getElementById('button');
			button.addEventListener("click", save, false);
			display();
		}

		function save () {
			var name = document.getElementById('name').value,
				num = document.getElementById('num').value;
				sessionStorage.setItem(name, num);
				display();
				name.value="";
				num.value="";
		}

		function display () {
			var display_data = document.getElementById('display_data');
			display_data.innerHTML="";
			for (var i = 0; i < sessionStorage.length; i++) {
				var a = sessionStorage.key(i);
				var b = sessionStorage.getItem(a);
				display_data.innerHTML +="<p>"+a+" - "+b+ "<button id='remove'>x</button></p>";
			}
		}

		function clear (){
			sessionStorage.clear();
			location.reload();
		}

		function clearItem () {
			for (var i = 0; i < sessionStorage.length; i++) {
				var a = sessionStorage.key(i);
				var b = sessionStorage.removeItem(a);
			}
		}

		var display_data = document.getElementById('display_data');
		if (display_data && display_data.length !== 0) {
			var remove = document.getElementById('remove');
			remove.addEventListener("click", clearItem, false);
			console.log(remove);
		}
		
		window.addEventListener("load", doFirst, false);