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 dataH = [];
  
  	function showData() {
    	if(typeof(Storage) !== "undefined") {
          if(localStorage.getItem('dataH') && localStorage.getItem('dataH').length > 0)
            dataH = JSON.parse(localStorage.getItem('dataH'));
          DataHandler = {
            'title': $("#txtbox-1").val(),
            'para': $("#txtbox-2").val(),
            'para1': $("#txtbox-3").val(),
          };
          
          iDataHandler.push(DataHandler);
          localStorage.setItem('dataH', JSON.stringify(dataH));
        }
        
      // appending data
          for (var i = 0; i < Object.keys(dataH).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>'
            );
          } 
    }
  
    $(".save").on("click", function() {
     	showData();
    });
    
    showData();
  
});