JSFiddle - React, Tailwind, and code Playground

by Michel Plungjan

HTML

<div id="content">
    <table border="1">
        <tr>
            <th>Book Cover</th>
            <th>Title & Author</th>
            <th>Price</th>
            <th>Quantity</th>
        </tr>
        <tr>
            <td class="image">
                <a href="cover2.html" onClick="return openNewWindow(this.href, 475, 725);"><img alt="Book Cover" src="images/covers/2artfielding.png" /></a>
            </td>
            <td class="title">
                <p class="table"><b>The Art of Fielding</b></p>
                <p class="table"><i>by Chad Harbach</i></p>
            </td>
            <td class="price">
                <p class="bookprice" id="artprice">$28.99</p>
            </td>
            <td class="quantity">
                <input type="text" id="artquantity" value="1" /><br />
            </td>
        </tr>
        <tr>
            <td class="image"><a href="cover5.html" onClick="return openNewWindow(this.href,475, 725);"><img alt="Book Cover" src="images/covers/18thelovers.png" /></a></td>

            <td class="title">
                <p class="table"><b>The Lover's Dictionary</b></p>
                <p class="table"><i>by David Levithan</i></p>
            </td>
            <td class="price">
                <p class="bookprice" id="loverprice">$19.95</p>
            </td>

            <td class="quantity">
                <input type="text" id="loverquantity" value="1" /><br />
            </td>
        </tr>

        <tr>
            <td class="image"><a href="cover4.html)" onClick="return openNewWindow(this.href,475, 725);"><img alt="Book Cover" src="images/covers/11nightcircus.png" /></a></td>
            <td class="title">
                <p class="table"><b>The Night Circus</b></p>

                <p class="table"><i>by Erin Morgenstern</i></p>
            </td>
            <td class="price">
                <p class="bookprice" id="nightprice">$32.00</p>
            </td>
            <td class="quantity">
                <input...

JavaScript

var popimage = 1;
function openNewWindow(href, width, height) {
   // The popup name will be popup1, popup2, popup3, …. etc.   
   // Notice how we've concatenated the 'width' and 'height' parameters.
   var w = window.open(href, "popup"+popimage,
   "width=" + width + ",height=" + height +
   ",top=10,left=10,screenX=10,screenY=10,resizable=1,scrollbars=1,menubar=0");
   popimage++;
    return w?false:true;
}

var books = {}
window.onload=function() {
  var inputs = document.getElementsByTagName('input');
  for (var i=0;i<inputs.length;i++) {
    if (inputs[i].type=="text" && inputs[i].id.indexOf('quantity')!=-1) {
      var name = inputs[i].id.replace('quantity','');
      books[name] = parseFloat(document.getElementById(name+'price').innerHTML.replace('$',''))
      inputs[i].onkeyup=function() {
        var total = 0;
        for (var book in books) {
          var q = document.getElementById(book+"quantity").value;
          total += (isNaN(q) || q=="")?0:parseInt(q)*books[book]
        }
            document.getElementById('subtotal').innerHTML="Sub-total: $"+total.toFixed(2);      
            document.getElementById('taxes').innerHTML="Taxes: $"+(total*.06).toFixed(2);      
            document.getElementById('grandtotal').innerHTML="Grand-total: $"+(total*1.06).toFixed(2);      
      }  
    }
  }
}