Edit in JSFiddle

/* global EpubMaker */
'use strict';

window.runTest = function() {

  var epubMaker = new EpubMaker()
    .withUuid('github.com/baivong/Userscript::truyenfull::van-co-chi-ton')
    .withTemplate('idpf-wasteland')
    .withAuthor('Thái Nhất Sinh Thủy')
    .withLanguage('vi')
    .withModificationDate(new Date)
    .withCover('http://static.truyenfull.vn/poster/n/QWJ4NzhWQUZmRkcxcTBldypGYVZaejBpX0deRmYqQCp2VmtBYUxNMm0xMW96THkxeU9EVnZVMF1FT0hKM05DOVdaVn15X1s1UFRdKjRTUzlCUVVGQlFVRkJRVUZ9U1M5Kk9WXURYMX1AVH5KSVNTOTNNfkUxTFdeek1*SXRTV00wTV49PQ==/van-co-chi-ton.jpg')
    .withTitle('Vạn cổ chí tôn');

  epubMaker.withSection(new EpubMaker.Section('introduction', 'info', {
    content: '<h1>Vạn cổ chí tôn</h1><h2>baivong</h2>',
    title: 'Giới thiệu'
  }, false, true));
  
  epubMaker.withSection(new EpubMaker.Section('bodymatter', 'content', {
    title: 'Nội dung'
  }, false, true));

  epubMaker.withSection(new EpubMaker.Section('chapter', 'chuong-1', {
    content: '<p>Text chương 1</p><p>Text chương 1</p><p>Text chương 1</p>',
    title: 'Chương 1'
  }, true, false));

  epubMaker.withSection(new EpubMaker.Section('chapter', 'chuong-2', {
    content: '<p>Text chương 2</p><p>Text chương 2</p>',
    title: 'Chương 2'
  }, true, false));

  epubMaker.withSection(new EpubMaker.Section('chapter', 'chuong-3', {
    content: '<p>Text chương 3</p>',
    title: 'Chương 3'
  }, true, false));

  epubMaker.withSection(new EpubMaker.Section('rearnote', 'note', {
    content: '<p>Truyện tải từ truyenfull</p>',
    title: 'Bản quyền'
  }, false, true));

  epubMaker.downloadEpub();
};

<a href="#" onclick="window.runTest(); return false;" class="myButton">Download EPUB</a>

<hr/>

<p>All the custom content has been defined in template <i>&lt;script&gt;</i> tags.</p>

<p>The content is minified using <a href="https://kangax.github.io/html-minifier/">HTML Minifier</a> to demonstrate that the resulting EPUB can be produced with nicely formatted contents (technically that is, readers don't see a difference)</p>

<hr/>

<h2>3rd Party libraries explained</h2>

<div class="CSSTableGenerator">
  <table>
    <tr>
      <td> library </td>
      <td> optional </td>
      <td> what is it used for </td>
    </tr>
    <tr>
      <td> js-epub-maker.js </td>
      <td> required </td>
      <td> Core library that uses all other libraries to produce a custom EPUB file </td>
    </tr>
    <tr>
      <td> handlebars.min.js </td>
      <td> required </td>
      <td> Used to blend in the provided content sources into the EPUB resources </td>
    </tr>
    <tr>
      <td> jszip.min.js </td>
      <td> required </td>
      <td> used to create the physical EPUB file, which is actually a zip file with a modified mimetype </td>
    </tr>
    <tr>
      <td> jszip-utils.min.js </td>
      <td> required for custom cover image </td>
      <td> This util is used to GET image data properly as base64 </td>
    </tr>
    <tr>
      <td> FileSaver.min.js </td>
      <td> required for download EPUB function </td>
      <td> Allows the browser to download an in memory datasource as file using 'Save as...' dialog </td>
    </tr>
    <tr>
      <td> underscore.string.min.js </td>
      <td> optional </td>
      <td> If supplied, will use the more advanced <a href="https://github.com/epeli/underscore.string#slugifystring--string">slugify</a> function from underscore.string. </td>
    </tr>
    <tr>
      <td> beautify-html.js </td>
      <td> optional </td>
      <td> If supplied, formats all HTML and XML files in the produced EPUB. Only useful for close inspection purposes, EPUB readers won't know the difference. </td>
    </tr>
  </table>
</div>


<!-- we're creating an EPUB with the following content: -->


<script id="header-template" type="text/template">
  <h1>It Came From</h1>
  <div class="aut">It is I</div>
  <div epub:type="epigraph">
    <p>The future has a way of arriving unannounced.
      <br/>- George Will </p>
  </div>
  <p epub:type="dedication">For Shmokey McPokey</p>
</script>

<script id="preface-template" type="text/template">
  <p> This Epub was generated from javascript, using <a href="https://github.com/bbottema/js-epub-maker">https://github.com/bbottema/js-epub-maker</a> </p>
  <p> This was done by taking the <a href="http://idpf.github.io/epub3-samples/samples.html#wasteland">IDPF Waste Land epub3 sample</a>, gutting it and making the content dynamic. </p>
  <p> The rest of this epub is generated content using various Lorum Ipsum generator variations, to demonstrate the configuration for adding sections and nested sections to achieve proper epub(type) nesting (front matter, body matter, chapters, notes etc.
    etc.). </p>
</script>

<script id="chapter1-template" type="text/template">
  <div class="linegroup">
    <div>Sem malesuada eleifend odio risus.</div>
    <div>Quis interdum quam diam. Amet, eros in cursus.</div>
    <div>Et viverra aptent.</div>
    <div>Scelerisque pretium ut sem pede consectetuer tortor.</div>
    <div>Convallis dolor parturient tempus non condimentum mattis.</div>
    <div>Hymenaeos congue ligula quam aliquet porta lorem, cursus tellus.</div>
  </div>
  <div class="linegroup">
    <div>Bibendum integer quam at congue.</div>
    <div>Vivamus elementum sodales molestie magna Rhoncus. Sed lobortis tempus. Per adipiscing at facilisis praesent consectetuer.</div>
    <div>Ipsum dapibus, amet dolor.</div>
    <div>Pellentesque blandit eget. Tortor mattis senectus.</div>
    <div>Et interdum purus. Primis montes sodales quis praesent. Elementum.</div>
    <div>Nascetur augue metus donec condimentum felis molestie.</div>
    <div>Mi mollis vivamus.</div>
    <div>Fusce convallis lacus tortor a. Massa aliquam.</div>
    <div>Id elit bibendum. Pharetra congue.</div>
    <div>Turpis sociis cubilia elit ad curae; est, consectetuer.</div>
  </div>
</script>

<script id="chapter2-template" type="text/template">
  <div class="linegroup">
    <div>Urna lacus viverra fringilla.</div>
    <div>Pellentesque bibendum dolor quisque eget aliquam feugiat.</div>
    <div>Natoque consectetuer proin.</div>
    <div>Quam justo rutrum malesuada. Litora dui nisi convallis lobortis.</div>
    <div>Cras pulvinar nonummy egestas donec netus. Rhoncus.</div>
    <div>Class interdum, gravida sem orci venenatis molestie. Vestibulum.</div>
    <div>Consectetuer, tortor, dapibus curae; torquent vel. Vulputate sociis curae;.</div>
    <div>Fringilla. Cursus aenean ultricies quis dis commodo.</div>
  </div>
  <div class="linegroup">
    <div>Scelerisque mus congue libero litora aliquam.</div>
    <div>Pulvinar tristique adipiscing tellus sem, sem scelerisque nisi vestibulum.</div>
    <div>Phasellus feugiat a.</div>
    <div>Sodales curae; natoque. Habitant etiam in est praesent. Dui.</div>
    <div>Proin suscipit mauris lorem. Elementum. Integer imperdiet. Sem.</div>
    <div>Scelerisque vehicula volutpat.</div>
  </div>
</script>

<script id="chapter3-template" type="text/template">
  <div class="linegroup">
    <div>Tree unto he winged she&#39;d own, fruit he.</div>
    <div>From replenish rule saw. Made.</div>
    <div>Said saying given spirit creature man, she&#39;d.</div>
    <div>Greater without may face it saying. Creature years.</div>
    <div>Saw Void there multiply greater blessed don&#39;t signs.</div>
    <div>Brought blessed fly give.</div>
    <div>Cattle replenish their be have.</div>
    <div>He subdue his our. Green forth.</div>
    <div>Without their forth fly.</div>
    <div>Itself waters beginning waters in isn&#39;t i all sixth.</div>
    <div>Midst thing kind evening their. God their living.</div>
    <div>Third face living open he Together. Air.</div>
    <div>Thing together fourth Life first.</div>
    <div>Appear light own from him multiply.</div>
    <div>Cattle herb green their living created god that.</div>
  </div>
</script>

<script id="chapter4-template" type="text/template">
  <div class="linegroup">
    <div>Form kind third day yielding over.</div>
    <div>Doesn&#39;t can&#39;t beginning saw hath.</div>
    <div>Good fifth light land day itself gathered first land.</div>
    <div>Were unto darkness may were his.</div>
    <div>Cattle own lights upon.</div>
    <div>From created second after.</div>
    <div>There whose moved us him from fill he of fifth.</div>
    <div>Face man. Lights, moved us they&#39;re female also he.</div>
    <div>Brought. She&#39;d. One have midst abundantly good.</div>
    <div>Created subdue. Years doesn&#39;t. Lesser can&#39;t doesn&#39;t fowl.</div>
    <div>Made second fourth fruit moving, form years.</div>
    <div>Male signs winged without fly replenish. Seed.</div>
    <div>Said Face fifth don&#39;t open don&#39;t moving.</div>
    <div>Given. Moveth sixth, moving void hath to.</div>
    <div>Above. Be creeping shall were Was.</div>
  </div>
</script>

<script id="rearnotes1-template" type="text/template">
  Lorizzle get down get down dolor shit fizzle, shizzlin dizzle ghetto ma nizzle. Own yo' sapien dizzle, my shizz volutpat, cool quizzle, crunk vizzle, fo shizzle. Pellentesque eget brizzle. Break it down eros. Cool izzle rizzle get down get down turpis
  tempizzle nizzle. Maurizzle pellentesque nibh et turpizzle. Shiznit izzle tortizzle. Pellentesque eleifend rhoncus dang. In bow wow wow habitasse platea dictumst. Donec dapibizzle. Curabitizzle tellizzle tellivizzle, pretizzle fizzle, mattizzle we gonna
  chung, bling bling vitae, nunc. Bizzle izzle. Integizzle semper tellivizzle sizzle purizzle.
</script>

<script id="rearnotes2-template" type="text/template">
  Candy canes icing gummi bears sugar plum. Macaroon jelly beans ice cream gingerbread chupa chups gingerbread chocolate cake jujubes chocolate. Topping cake cheesecake croissant cupcake gummies chupa chups. Gummi bears caramels lemon drops. Tart tiramisu
  wafer bear claw fruitcake toffee marzipan cupcake. Cookie cake jelly beans chupa chups jelly beans chocolate cake pastry.
</script>

.CSSTableGenerator {
  margin: 0px;
  padding: 0px;
  width: 100%;
  box-shadow: 10px 10px 5px #888888;
  border: 1px solid #bf0000;
  -moz-border-radius-bottomleft: 14px;
  -webkit-border-bottom-left-radius: 14px;
  border-bottom-left-radius: 14px;
  -moz-border-radius-bottomright: 14px;
  -webkit-border-bottom-right-radius: 14px;
  border-bottom-right-radius: 14px;
  -moz-border-radius-topright: 14px;
  -webkit-border-top-right-radius: 14px;
  border-top-right-radius: 14px;
  -moz-border-radius-topleft: 14px;
  -webkit-border-top-left-radius: 14px;
  border-top-left-radius: 14px;
}

.CSSTableGenerator table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
}

.CSSTableGenerator tr:last-child td:last-child {
  -moz-border-radius-bottomright: 14px;
  -webkit-border-bottom-right-radius: 14px;
  border-bottom-right-radius: 14px;
}

.CSSTableGenerator table tr:first-child td:first-child {
  -moz-border-radius-topleft: 14px;
  -webkit-border-top-left-radius: 14px;
  border-top-left-radius: 14px;
}

.CSSTableGenerator table tr:first-child td:last-child {
  -moz-border-radius-topright: 14px;
  -webkit-border-top-right-radius: 14px;
  border-top-right-radius: 14px;
}

.CSSTableGenerator tr:last-child td:first-child {
  -moz-border-radius-bottomleft: 14px;
  -webkit-border-bottom-left-radius: 14px;
  border-bottom-left-radius: 14px;
}

.CSSTableGenerator tr:hover td {
  background-color: #ffaaaa;
}

.CSSTableGenerator td {
  vertical-align: middle;
  background-color: #ffffff;
  border: 1px solid #bf0000;
  border-width: 0px 1px 1px 0px;
  text-align: left;
  padding: 7px;
  font-size: 10px;
  font-family: Arial;
  font-weight: normal;
  color: #000000;
}

.CSSTableGenerator tr:last-child td {
  border-width: 0px 1px 0px 0px;
}

.CSSTableGenerator tr td:last-child {
  border-width: 0px 0px 1px 0px;
}

.CSSTableGenerator tr:last-child td:last-child {
  border-width: 0px 0px 0px 0px;
}

.CSSTableGenerator tr:first-child td {
  background: -o-linear-gradient(bottom, #ff5656 5%, #ff5656 100%);
  background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ff5656), color-stop(1, #ff5656));
  background: -moz-linear-gradient( center top, #ff5656 5%, #ff5656 100%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="#ff5656", endColorstr="#ff5656");
  background: -o-linear-gradient(top, #ff5656, ff5656);
  background-color: #ff5656;
  border: 0px solid #bf0000;
  text-align: center;
  border-width: 0px 0px 1px 1px;
  font-size: 14px;
  font-family: Arial;
  font-weight: bold;
  color: #ffffff;
}

.CSSTableGenerator tr:first-child:hover td {
  background: -o-linear-gradient(bottom, #ff5656 5%, #ff5656 100%);
  background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ff5656), color-stop(1, #ff5656));
  background: -moz-linear-gradient( center top, #ff5656 5%, #ff5656 100%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="#ff5656", endColorstr="#ff5656");
  background: -o-linear-gradient(top, #ff5656, ff5656);
  background-color: #ff5656;
}

.CSSTableGenerator tr:first-child td:first-child {
  border-width: 0px 0px 1px 0px;
}

.CSSTableGenerator tr:first-child td:last-child {
  border-width: 0px 0px 1px 1px;
}

.myButton {
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #599bb3), color-stop(1, #408c99));
  background: -moz-linear-gradient(top, #599bb3 5%, #408c99 100%);
  background: -webkit-linear-gradient(top, #599bb3 5%, #408c99 100%);
  background: -o-linear-gradient(top, #599bb3 5%, #408c99 100%);
  background: -ms-linear-gradient(top, #599bb3 5%, #408c99 100%);
  background: linear-gradient(to bottom, #599bb3 5%, #408c99 100%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#599bb3', endColorstr='#408c99', GradientType=0);
  background-color: #599bb3;
  -moz-border-radius: 12px;
  -webkit-border-radius: 12px;
  border-radius: 12px;
  display: inline-block;
  cursor: pointer;
  color: #ffffff;
  font-family: Arial;
  font-size: 28px;
  padding: 12px 76px;
  text-decoration: none;
}

.myButton:hover {
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #408c99), color-stop(1, #599bb3));
  background: -moz-linear-gradient(top, #408c99 5%, #599bb3 100%);
  background: -webkit-linear-gradient(top, #408c99 5%, #599bb3 100%);
  background: -o-linear-gradient(top, #408c99 5%, #599bb3 100%);
  background: -ms-linear-gradient(top, #408c99 5%, #599bb3 100%);
  background: linear-gradient(to bottom, #408c99 5%, #599bb3 100%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#408c99', endColorstr='#599bb3', GradientType=0);
  background-color: #408c99;
}

.myButton:active {
  position: relative;
  top: 1px;
}