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 = localStorage.getItem("testObjects") ? JSON.parse(localStorage.getItem("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({
        name: 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);
};