Making a STATIC Product Comparison Table DYNAMIC

I am currently attempting to make a product comparison feature for books.

How can I turn the static comparison table I have into a dynamic table where it checks the products selected by the user and then pulls their data from the array containing it?

If anyone could demo how to make one table cell dynamic to start me off, I could most likely figure out the rest, I just don't know where to start. Thanks in advance!

Comparison Table:

<table class="compare_table" id="compare_table">
  <tr>
      <td><a href="#">Agricultural Economics</a></td>
      <td><a href="#">Food and Energy Security</a></td>
    </tr>
    <tr>
       <td>Impact Factor: 2.423</td>
       <td>Impact Factor: 4.781</td>
    </tr>
    <tr>
      <td>ORCID Policy: Encouraged</td>
      <td>ORCID Policy: Encouraged</td>
    </tr>
    <tr>
        <td>Data Sharing Policy: Encouraged</td>
        <td>Data Sharing Policy: Encouraged</td>
    </tr>
</table>

Functions:

<script>
    function AllSubjects(arr) {
      var out = "";
      var i;
      for (i = 0; i < arr.length; i++) {
        out += '<div class="filterDiv ' + arr[i].journalfilter + '" id="filterDiv"><div class="products ' + arr[i]
        .journalimpactfactor +
        '" id="products"><label class="label" id="check">Compare<input id="journalcard" type="checkbox" onclick="productAssign()" onmouseup="productSelect()"><span class="checkbox"></span></label><div class="product__info" id="cover"><div class="overlay-image"><img class="image" src="' +
        arr[i].journalimage + '"><div class="text"><img src="' + arr[i].accessimage +
        '"></div></div><a class="product__title" href="https://s1133198723.t.eloqua.com/e/f2.aspx?elqFormName=BFS-Journal-Explorer&elqSiteID=1133198723&emailAddress=~~eloqua..type--emailfield..syntax--EmailAddress..innerText--EmailAddress..encodeFor--url~~&ClickedJournal=' + arr[i].journaltitle + '&redirect=' + arr[i].journalurl + '" target="_blank">' + arr[i]
        .journaltitle + '</a><div class="journal-content"><ul><li>Impact Factor: ' + arr[i].journalimpactfactor +
        '</li><li>' + arr[i].journaloapolicy +
        '</li></ul></div></div><div class="collapsible" onclick="display()">&#xbb; Read more</div><ul class="content"><li class="subtitle">' +
        arr[i].journaltitle + '</li><li>&#x25CF; ' + arr[i].journalscope + '</li><li>&#x25CF; Data sharing: ' + arr[i]
        .journaldatashare + '</li><li style="padding: 0px 0px 8px 0px">&#x25CF; ORCID: ' + arr[i].journalorcid +
        '</li><div class="center-caption"><a href="' + arr[i].journalurl +
        '" target="_blank" class="moreBtn" style="font-weight: 400; padding: 5px;">Find out more</a></ul></div></div><div>';
    }
    document.getElementById("journals").innerHTML = out;
}
</script> 
<!------------------ product styling code when checked -----------------------> 
<script>
    function productAssign() {
      var el = document.getElementById('check');
      var sels = el.getElementsByTagName('input');

      for (var i = 0, len = sels.length; i < len; i++) {
        if (sels[i].type === 'checkbox') {
          sels[i].onclick = productSelect;
      }
  }
}

function productSelect(e) {
  var arr = this.inArray;

  if (document.getElementsByName("check").backgroundColor == "#1ba7b") {
    document.getElementById("products").style.boxShadow = "0 0 0 2px #1ba7b1";
} else {
    document.getElementById("products").style.boxShadow = "0 0 0 1px #eeeeee";
}
}

        // Function to enable/disable "Compare" button
       $('input[id="products"]').click(function () {
        if (document.getElementsByClassName('product-selected')) {
          el.style.display = 'block';
      } else {
          el.style.display = 'none';
      }
  }
</script> 

Book Data:

<script>
    AllSubjects([{
        "journalfilter": "accounting open",
        "journalorder": "1",
        "journaltitle": "Abacus",
        "journalimpactfactor": "2.2",
        "journalorcid": "No policy",
        "journaldatashare": "No policy",
    },
    {
        "journalfilter": "accounting full",
        "journalorder": "2",
        "journaltitle": "Contemporary Accounting",
        "journalimpactfactor": "1.206",
        "journalorcid": "No policy",
        "journaldatashare": "Encouraged",
    },
    {
        "journalfilter": "agriculture open new",
        "journalorder": "3",
        "journaltitle": "Food and Energy Security",
        "journalimpactfactor": "4.781",
        "journalorcid": "Required",
        "journaldatashare": "No Policy",
    },
    {
        "journalfilter": "agriculture full new",
        "journalorder": "4",
        "journaltitle": "Agricultural Economics",
        "journalimpactfactor": "2.423",
        "journalorcid": "No policy",
        "journaldatashare": "Encouraged",
    },
    {
        "journalfilter": "agriculture open",
        "journalorder": "5",
        "journaltitle": "Annals of Applied Biology",
        "journalimpactfactor": "1.611",
        "journalorcid": "No policy",
        "journaldatashare": "Encouraged",
    },
    ]);

</script>