JSFiddle - React, Tailwind, and code Playground

HTML

<div class='contSelf'></div>

JavaScript

$( document ).ready(function() {

var general = {
 "Hardcover" : [["Book A",4],["Book B",6],["Book C",5]],
 "Ebooks" : [["Ebook A",14],["Ebook B",98]],
 "PDFs" : [["PDF A",2],["PDF B",1],["PDF C",.5]],
  "Free Texts" :[["FA A",4],["FA B",6],["FA C",5]],

};

for(var title in general) {
  $(".contSelf").append("<h1 > "+title +"</h1>");

  for(var bookArr in general[title]) {
  //  console.log(general[title][book]);
    var book=general[title][bookArr];
    $(".contSelf").append("<li class='book' > "+book[0] +' :$'+book[1] +"</li>");

  }
}
});