title: How do i get the dynamic table displayed as a popup?
body: <p>I have this piece of code which computes the difference between the rows of two selected tables and display the result on click of button. How can I display the result in a pop up? Basically I want the resultant table to come as popup, so that when we close the popup the tables checkbox are again reset.</p>
  <p>Edit: I tried using modals but it seems to be not working. Can anyone please help where I am going wrong</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var selectedRows = document.getElementsByClassName('selected');
          limit = 0; //set limit
  
          checkboxes = document.querySelectorAll('.checkboxdiv input[type="checkbox"]');
          function checker(elem) {
              if (elem.checked) {
                  limit++;
              } else {
                  limit--;
              }
  
              for (i = 0; i &lt; checkboxes.length; i++) {
  
                  if (limit == 2) {
                      if (!checkboxes[i].checked) {
                          checkboxes[i].disabled = true;
  
                      }
  
                  } else {
  
                      if (!checkboxes[i].checked) {
                          checkboxes[i].disabled = false;
                      }
  
                  }
              }
  
          }
  
          for (i = 0; i &lt; checkboxes.length; i++) {
              checkboxes[i].onclick = function () {
                  checker(this);
              }
          }
  
          var checkedArray;
          function myFunction(event) {
              event.target.parentElement.parentElement.className =
                  event.target.checked ? 'selected' : '';
  
              var elements = document.getElementsByTagName("INPUT");
              checkedArray = new Array();
              for (var i = 0; i &lt; elements.length; i++) {
                  if (elements[i].type === 'checkbox' &amp;&amp; elements[i].checked) {
                      checkedArray.push(elements[i].id);
                  }
              }
              console.log(checkedArray);
          }
  
          $(".btn[data-target='#myModal']").click(function() {
   var modalBody = $('&lt;div id="modalContent"&gt;&lt;/div&gt;');
  var table;
              const buildTable = (arr) =&gt; {
                  table = document.querySelector("#diff-table");
                  if (table) table.remove();
  
                  table = document.createElement("table");
                  table.id = "diff-table";
                  const thead = document.createElement("thead"),
                      thA = document.createElement("th"),
                      thB = document.createElement("th"),
                      thDiff = document.createElement("th");
                  thA.innerText = "Plan A";
                  thB.innerText = "Plan B";
                  thDiff.innerText = "Difference";
                  thead.append(thA, thB, thDiff);
                  table.append(thead);
  
                  arr.forEach((i) =&gt; {
                      const tr = document.createElement("tr"),
                          tdA = document.createElement("td"),
                          tdB = document.createElement("td"),
                          tdDiff = document.createElement("td");
                      tdA.innerText = "$" + i["planA"];
                      tdB.innerText = "$" + i["planB"];
                      tdDiff.innerText = "$" + i["diff"];
                      tr.append(tdA, tdB, tdDiff);
                      table.append(tr);
                  });
  
                  document.body.append(table);
              };
              const checked = document.querySelectorAll(":checked"),
                  arr = [];
              if (checked.length !== 2) return;
              const plans = document.querySelectorAll(":checked"),     
              planA = plans[0].closest("table").querySelectorAll("td"),    
               planB = plans[1].closest("table").querySelectorAll("td");
  
              planA.forEach((cell, i) =&gt; {
                  const valA = +cell.innerText.replace(/[^\d.-]/g, '');
                  const valB = +planB[i].innerText.replace(/[^\d.-]/g, '');
                  arr.push({ planA: valA, planB: valB, diff: valA - valB });
              });
  
              buildTable(arr);
              modalBody.append(table);
    $('.modal-body').html(modalBody); 
  
          })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.table_container {
              float: left;
              width: 25%;
          }
  
          .container::after {
              content: "";
              clear: both;
              display: table;
          }
  
          table {
              margin: 0 auto;
  
              border-radius: 10px;
          }
  
          tr {
              padding: 15px;
              text-align: center;
          }
  
          td {
              color: black;
              text-align: center;
              vertical-align: middle;
              border: 1px double white;
              height: 50px;
              background-color: light-grey;
              width: 272px;
          }
  
          .sub_text {
              font-size: 12px;
              font-style: italic;
              color: #0071ce;
              font-weight: 100;
          }
  
          th {
              background-color: #0071ce;
              text-align: center;
              padding: 10px;
              border-top-left-radius: 10px;
              border-top-right-radius: 10px;
              color: white;
              font-weight: bold;
          }
  
          .header {
              color: #0071ce;
              font-weight: bold;
              padding: 10px;
          }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="container"&gt;
          &lt;div class="table_container"&gt;
          &lt;/div&gt;
  
          &lt;div class="table_container"&gt;
              &lt;table id="table1" class="checkboxdiv"&gt;
                  &lt;tr&gt;
                      &lt;th&gt;Tab A&lt;input type="checkbox" id=" 1" name="table1" value="table1"
                              onchange="myFunction(event)"&gt; &lt;/th&gt;
  
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;$133.90&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;$161.30&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;$53.30&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;$186.20&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;HSA match:up to $350&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;HSA match:up to $700&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;$3000&lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/table&gt;
          &lt;/div&gt;
  
          &lt;div class="table_container"&gt;
              &lt;table id="table2" class="checkboxdiv"&gt;
                  &lt;tr&gt;
                      &lt;th&gt;Tab B &lt;input type="checkbox" id="2" name="table2" value="table2"
                              onchange="myFunction(event)"&gt;&lt;/th&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;$33.90&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;$161.30&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;$53.30&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;$186.20&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;HSA match:up to $350&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;HSA match:up to $700&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;$3000&lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/table&gt;
          &lt;/div&gt;
  
          &lt;div class="table_container"&gt;
              &lt;table id="table3" class="checkboxdiv"&gt;
                  &lt;tr&gt;
                      &lt;th&gt;Tab C&lt;input type="checkbox" id="3" name="table3" value="table3"
                              onchange="myFunction(event)"&gt; &lt;/th&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;$33.90&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;$161.30&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;$53.30&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;$186.20&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;HSA match:up to $350&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;HSA match:up to $700&lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/table&gt;
          &lt;/div&gt;
      &lt;/div&gt;
   &lt;button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal"&gt;
          Launch demo modal
        &lt;/button&gt;
        &lt;div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
  aria-hidden="true"&gt;
      &lt;div class="modal-dialog"&gt;
          &lt;div class="modal-content"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="modal-dialog"&gt;
          &lt;div class="modal-content"&gt;
              &lt;div class="modal-body"&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>