JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" id="nameOfbook" required="" placeholder="Book name" />
    <input type="text" id="nameOfauthor" required="" placeholder="Athor name" />
    <input type="text" id="year" required="" placeholder="Add year" />
    
    <button id="addder" type="button">StoreEmail</button>


<div id="container">
    <div class="boock-first">
        <div class="name"></div>
        <div class="author"></div>
        <div class="year"></div>
    </div>
</div>

JavaScript

var testObjects = [];

var button = document.getElementById("addder").onclick = function(){
    makeJob();
}

var name = document.getElementById("nameOfbook");
var author = document.getElementById("nameOfauthor");
var year = document.getElementById("year");

function makeJob() {
  testObjects.push({
		namee: name.value,
        author: author.value,
        year: year.value
    })
    
localStorage.setItem('testObjects', JSON.stringify(testObjects));

// отримати обєкт з локального
var retrievedObjects = localStorage.getItem('testObjects');
var parsedJsonObjects = JSON.parse(retrievedObjects);

console.log(parsedJsonObjects);

var container = document.getElementById('container');

function putDataToHtml(htmlElement, singleObject) {
    htmlElement.querySelector('.name').innerHTML = singleObject.name;
    htmlElement.querySelector('.author').innerHTML = singleObject.author;
    htmlElement.querySelector('.year').innerHTML = singleObject.year;
}

for(var index in parsedJsonObjects) {
    if (parsedJsonObjects.hasOwnProperty(index)) {
        var newHtmlElement;
        if(index == 0){
            newHtmlElement = document.querySelector(".boock-first");
            putDataToHtml(newHtmlElement, parsedJsonObjects[index]);
        } else {
            newHtmlElement = document.querySelector(".boock-first").cloneNode(true);
            putDataToHtml(newHtmlElement, parsedJsonObjects[index]);
            container.appendChild(newHtmlElement);
        }
    }
}

console.log(parsedJsonObjects);
};