JSFiddle - React, Tailwind, and code Playground

by ricobenviaje11

HTML

<input type="text" name="" id="txtbox-1">
<input type="text" name="" id="txtbox-2">
<input type="text" name="" id="txtbox-3">
<div class="save">
Save
</div>


<div class="sNote"></div>

JavaScript

$("document").ready(function(){
  var iDataHandler = [];
  
  	function showData() {
    	if(typeof(Storage) !== "undefined") {
      		if(localStorage.getItem('iDataHandler') && localStorage.getItem('iDataHandler').length > 0)
            iDataHandler = JSON.parse(localStorage.getItem('iDataHandler'));

          for (var i = 0; i < Object.keys(iDataHandler).length; i++) {
					const {title, para, para1} = iDataHandler[(Object.keys(iDataHandler)[i])]

          $('.sNote').append(
              '</div><div class="close"><i class="fas fa-times"></i></div>' +
              '<div class = "name-c">' +
                '<div class = "name">Name: ' + title + '</div>' +
               	'<div class = "middle">MiddleName: ' + para + '</div>'  +
                '<div class = "surname"> Surname: ' + para1 + '</div>' +
              '</div>'
            );
          } 
       }
    }
    
    function addData(){
    	if(typeof(Storage) !== "undefined") {
          if(localStorage.getItem('iDataHandler') && localStorage.getItem('iDataHandler').length > 0)
            iDataHandler = JSON.parse(localStorage.getItem('iDataHandler'));
          DataHandler = {
            'title': $("#txtbox-1").val(),
            'para': $("#txtbox-2").val(),
            'para1': $("#txtbox-3").val(),
          };
          
          iDataHandler.push(DataHandler);
          localStorage.setItem('iDataHandler', JSON.stringify(iDataHandler));
          
          $('.sNote').append(
              '</div><div class="close"><i class="fas fa-times"></i></div>' +
              '<div class = "name-c">' +
                '<div class = "name">Name: ' + DataHandler.title + '</div>' +
               	'<div class = "middle">MiddleName: ' + DataHandler.para + '</div>'  +
                '<div class = "surname"> Surname: ' + DataHandler.para1 + '</div>' +
              '</div>'
            );
       }
         
    }
  
    $(".save").on("click", function() {
     	addData();
    });
    
    showData();
 ...