JSFiddle - React, Tailwind, and code Playground

HTML

<div id="box">
	<form action="#" method="post">
			<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="button" id="btnAdd" value="Add">
			<a href="#" id="clearAll">clear all</a>
	</form>
</div>
<div id="display_data">
  <span id='report'>  </span>
  <button id='btnRemove'>X</button>
</div>

CSS

#display_data { display:none; }

JavaScript

window.addEventListener("DOMContentLoaded", function() {

  // Get all needed DOM references:
  var link = document.getElementById("clearAll");
  var display_data = document.getElementById('display_data');
  var report = document.getElementById("report");
  var btnAdd = document.getElementById('btnAdd');
  var btnRemove = document.getElementById('btnRemove');  
  
  // Wire elements up to event handlers:
  link.addEventListener("click", clearAll);
	btnAdd.addEventListener("click", save);
  btnRemove.addEventListener("click", clearItem);
  
  // Only display session data if there is session data to display
  sessionStorage.length > 0 ? display() : "";

  function display () {
    // Show details if there are details to show
    display_data.style.display = sessionStorage.length > 0 ? "block" : "none";
   
    // get the key name
    var name = sessionStorage["name"];
    
    // get the key value
    var value = sessionStorage["number"];
    
    report.textContent = name + " - " + value; 
  }
 
  function save () {
   // Don't set variables equal to properties of DOM objects
   // Set them equal to the DOM object itself:
   var name = document.getElementById('name')
   var num = document.getElementById('num');
 
   // Put the name and  phone number into storage
   sessionStorage.setItem("name", name.value);
   sessionStorage.setItem("number", num.value);
 
   // Only display session data if there is session data to display
   sessionStorage.length > 0 ? display() : "";
 
   // These lines weren't working when your varaibles were set to
   // the value of the DOM elements, but now they will work
   name.value = "";
   num.value = "";
  
   display();
  }

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

  function clearItem () {
    // Don't loop over sessionStorage here - no need to
    // You know what you want to remove
    sessionStorage.removeItem("number");
    display();
  }
});