JSFiddle - React, Tailwind, and code Playground

HTML

<div id="nameOfBookDiv"></div>
<div id="priceOfBookDiv"></div>
<div id="displayTotal"></div>

JavaScript

function addBooks() {
  var total = 0;
  for (i = 0; i < 4; i++) {
    var nameBook = prompt("Enter name of Book", "");
    document.getElementById("nameOfBookDiv").innerHTML += nameBook + "<br>";

    var priceBook = parseFloat(prompt("Enter price of Book", ""));
    document.getElementById("priceOfBookDiv").innerHTML += priceBook + "<br>";
    total += priceBook;
  }

  parseFloat(document.getElementById("displayTotal").innerHTML += total);
}

addBooks();