JSFiddle - React, Tailwind, and code Playground

by Dmitri Ganenco

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="col-md-12 col-sm-12">
  <hr>
  <h4 style="float: left; text-align: left;">Select up to 3 books, Click "Compare Titles", View your Top Picks Side-by-Side!</h4>
  <button class='btn goCompare'>Compare Titles</button>
  <button class='btn back' id="back" style="float: right; height: 34px; width: 140px; display:none;" onClick="refreshPage()">Back to Books</button>
  <table class='comparison' border="1px" style="float: left; margin-bottom: 2.5%;">
    <tbody>
      <tr class='product-img'></tr>
      <tr class='product-title'></tr>
      <tr class='product-impact'></tr>
      <tr class='product-oa'></tr>
      <tr class='product-scope'></tr>
      <tr class='product-orcid'></tr>
      <tr class='product-dsp'></tr>
    </tbody>
  </table>
</div>

CSS

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

JavaScript

$(".btn.goCompare").on('click', function(e) {
  e.preventDefault();
  buildComparisonTable();
});

function buildComparisonTable() {
	debugger;
  var comparisonTableBody = $('table.comparison tbody');
  var comparisonTableBodyProductTitleCol = $('table.comparison tbody tr.product-title');
  var comparisonTableBodyProductImgCol = $('table.comparison tbody tr.product-img');
  var comparisonTableBodyProductScopeCol = $('table.comparison tbody tr.product-scope');
  var comparisonTableBodyProductImpactCol = $('table.comparison tbody tr.product-impact');
  var comparisonTableBodyProductorcidCol = $('table.comparison tbody tr.product-orcid');
  var comparisonTableBodyProductoaCol = $('table.comparison tbody tr.product-oa');
  var comparisonTableBodyProductdspCol = $('table.comparison tbody tr.product-dsp');

  comparisonTableBody.find('.product-col').remove();
  $('.product.compare').each(function() {

    var id = $(this).attr('data-id');
    var img = $(this).attr('data-img');
    var title = $(this).attr('data-title');
    var scope = $(this).attr('data-scope');
    var impact = $(this).attr('data-impact');
    var orcid = $(this).attr('data-orcid');
    var oa = $(this).attr('data-oa');
    var dsp = $(this).attr('data-dsp');

    comparisonTableBodyProductImgCol.append('<td class="product-col"><img src=' + img + '></td>');
    comparisonTableBodyProductTitleCol.append('<td class="product-col">' + title + '</td>');
    comparisonTableBodyProductScopeCol.append('<td class="product-col">' + scope + '</td>');
    comparisonTableBodyProductImpactCol.append('<td class="product-col">' + impact + '</td>');
    comparisonTableBodyProductorcidCol.append('<td class="product-col">' + orcid + '</td>');
    comparisonTableBodyProductoaCol.append('<td class="product-col">' + oa + '</td>');
    comparisonTableBodyProductdspCol.append('<td class="product-col">' + dsp + '</td>');
  });
}