title: Interactive filter for HTML table with dynamically loaded data from JSON url
body: <p><strong>01)</strong> I dynamically load data from a JSON url into an HTML table. </p>
  
  <p><strong>02)</strong> I filter the results using a filter at the top of the page.</p>
  
  <p><strong>03)</strong> I load the data in the filter dynamically from the same JSON url. </p>
  
  <p><strong>04)</strong> I pasted the code in the snippet below (it won't load the JSON data because the url contains <code>https</code>. I created it just to make you see the code. The filter does not work here. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$.getJSON(
       'http://apolosiskos.co.uk/TEB/MOCK_DATA.json',
       function(data){
           var tr;
           $.each (data, function (key, val) {
              tr = $('&lt;tr/&gt;');
              tr.append('&lt;td class="name" rel="' + val.first_name + '"&gt;' + val.first_name + '&lt;/td&gt;');
              tr.append('&lt;td &gt;&lt;input class="metric1"/&gt;' + '&lt;/td&gt;');
              tr.append('&lt;td class="metric2" &gt;' + val.id + '&lt;/td&gt;');
              tr.append('&lt;td class="metric3"&gt;&lt;span class="multTotal"&gt;' +'0.00'+ '&lt;/span&gt;&lt;/td&gt;');
       tr.append('&lt;td class="metric3-100"&gt;&lt;span class="metric3-100"&gt;' +'0.00'+ '&lt;/span&gt;&lt;/td&gt;');
       tr.append('&lt;td class="metric1-100"&gt;&lt;span class="metric1-100"&gt;' +'0.00'+ '&lt;/span&gt;&lt;/td&gt;');
              $('table').append(tr);
           });
  
           $.each (data, function (key, val) {
              li = $('&lt;li/&gt;');
              li.append('&lt;input rel="name" type="checkbox" value="' + val.first_name + '"&gt;&lt;label for="cb1"&gt;' + val.first_name + '&lt;/label&gt;&lt;/li&gt;');
              $('ul').append(li);
           });
  
         $("input").keyup(multInputs);
         });
  
  $("input:checkbox").click(function () {
      var showAll = true;
      $('tr').not('.first').hide();
      $('input[type=checkbox]').each(function () {
          if ($(this)[0].checked) {
              showAll = false;
              var dimension1= $(this).attr('rel');
              var value = $(this).val();            
              $('td.' + dimension1+ '[rel="' + value + '"]').parent('tr').show();
          }
      });
      if(showAll){
          $('tr').show();
      }
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>h1{
    font-size: 30px;
    color: #fff;
    text-transform: uppercase;
    font-weight: 300;
    text-align: center;
    margin-bottom: 15px;
  }
  table{
    width:100%;
    table-layout: fixed;
  }
  .tbl-header{
    background-color: rgba(255,255,255,0.3);
   }
  .tbl-content{
    height:300px;
    overflow-x:auto;
    margin-top: 0px;
  }
  
  th{
    padding: 20px 15px;
    text-align: left;
    font-weight: 500;
    font-size: 12px;
    color: #fff;
    text-transform: uppercase;
  }
  td{
    padding: 10px;
    text-align: left;
    vertical-align:middle;
    font-weight: 300;
    font-size: 12px;
    color: #fff;
  
  }
  
  tr:nth-child(odd) td {
    background:#2cc3ce;
    color:#0d3852;
  }
  
  /* demo styles */
  
  @import url(http://fonts.googleapis.com/css?family=Roboto:400,500,300,700);
  body{
    background: #0d3852;
    font-family: 'Roboto', sans-serif;
  }
  section{
    margin: 50px;
  }
  
  input {
  max-width:50px;
  }
  
  *,
  *:after,
  *::before {
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
  }
  
  .ac-custom {
   padding: 0 1em;
   max-width: 900px;
   margin: 0 auto;
  }
  
  .ac-custom h2 {
   font-size: 1em;
   font-weight: 300;
   padding: 0 0 0.5em;
   margin: 0 0 30px;
   color:#0d3852;
  }
  
  .ac-custom ul,
  .ac-custom ol {
   list-style: none;
   padding: 0;
   margin: 0 auto;
   max-width: 800px;
  }
  
  .ac-custom li {
   margin: 0 auto;
   padding: 0.5em 0;
   position: relative;
  }
  
  .ac-custom label {
   display: inline-block;
   position: relative;
   font-size: 1em;
   padding: 0 0 0 80px;
   vertical-align: top;
   color: #0d3852;
   cursor: pointer;
   -webkit-transition: color 0.3s;
   transition: color 0.3s;
  }
  
  .ac-custom input[type="checkbox"],
  .ac-custom input[type="radio"],
  .ac-custom label::before {
   width: 20px;
   height: 20px;
   top: 50%;
   left: 0;
   margin-top: -12px;
   position: absolute;
   cursor: pointer;
  }
  
  .ac-custom input[type="checkbox"],
  .ac-custom input[type="radio"] {
   opacity: 0;
   -webkit-appearance: none;
   display: inline-block;
   vertical-align: middle;
   z-index: 100;
  }
  
  .ac-custom label::before {
   content: '';
   border: 1px solid #0d3852;
   -webkit-transition: opacity 0.3s;
   transition: opacity 0.3s;
  }
  
  .ac-radio label::before {
   border-radius: 50%;
  }
  
  .ac-custom input[type="checkbox"]:checked + label,
  .ac-custom input[type="radio"]:checked + label {
   color: #fff;
  } 
  
  .ac-custom input[type="checkbox"]:checked + label::before,
  .ac-custom input[type="radio"]:checked + label::before {
   opacity: 0.8;
  }
  
  /* General SVG and path styles */
  
  .ac-custom svg {
   position: absolute;
   width: 20px;
   height: 20px;
   top: 50%;
   margin-top: -12px;
   left: 0px;
   pointer-events: none;
  }
  
  .ac-custom svg path {
   stroke: #0d3852;
   stroke-width: 13px;
   stroke-linecap: round;
   stroke-linejoin: round;
   fill: none;
  }
  
  /* Specific input, SVG and path styles */
  
  /* Circle */
  .ac-circle input[type="checkbox"],
  .ac-circle input[type="radio"],
  .ac-circle label::before {
   width: 30px;
   height: 30px;
   margin-top: -15px;
   left: 10px;
   position: absolute;
  }
  
  .ac-circle label::before {
   background-color: #fff;
   border: none;
  }
  
  .ac-circle svg {
   width: 70px;
   height: 70px;
   margin-top: -35px;
   left: -10px;
  }
  
  .ac-circle svg path {
   stroke-width: 5px;
  } 
  
  /* Box Fill */
  .ac-boxfill svg path {
   stroke-width: 8px;
  } 
  
  /* Swirl */
  .ac-swirl svg path {
   stroke-width: 8px;
  }
  
  /* List */
  .ac-list ol {
   list-style: decimal;
   list-style-position: inside;
  }
  
  .ac-list ol li {
   font-size: 2em;
   padding: 1em 1em 0 2em;
   text-indent: -40px;
  }
  
  .ac-list ol li label {
   font-size: 0.5em;
   text-indent: 0;
   padding-left: 30px;
  }
  
  .ac-list label::before {
   display: none;
  }
  
  .ac-list svg {
   width: 100%;
   height: 80px;
   left: 0;
   top: 1.2em;
   margin-top: 0px;
  }
  
  .ac-list svg path {
   stroke-width: 4px;
  }
  
  .row {
    margin-left: -15px;
    margin-right: -15px;
    margin-top:0;
  }
  .col-sm-4 {
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 30px;
  }
  
  @media (min-width: 768px) {
    .col-sm-4 {
      float: left;
    }
  
    .col-sm-4 {
      width: 33.33333333%;
    } 
   
   .filter-columns {
   background-color:#2cc3ce;
   }
   
   .filter-columns-alt {
   background-color:#78D9E0;
   min-height:256px;
   }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="js/svgcheckbx.js"&gt;&lt;/script&gt;
    &lt;script src="js/jquery.dataTables.min.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" language="javascript" src="js/allinone.js"&gt;&lt;/script&gt;
  &lt;div class="row"&gt;
    &lt;div class="col-sm-4 filter-columns"&gt;
     &lt;div class="ac-custom ac-checkbox ac-cross" autocomplete="off"&gt;
      &lt;h2&gt;Dimension1&lt;/h2&gt;
      &lt;ul&gt;
       &lt;li&gt;&lt;input rel="name" type="checkbox" value="Debra"&gt;&lt;label for="cb1"&gt;Debra&lt;/label&gt;&lt;/li&gt;
       &lt;li&gt;&lt;input rel="name" type="checkbox" value="Julie"&gt;&lt;label for="cb1"&gt;Julie&lt;/label&gt;&lt;/li&gt;
       &lt;li&gt;&lt;input rel="name" type="checkbox" value="Norma"&gt;&lt;label for="cb1"&gt;Norma&lt;/label&gt;&lt;/li&gt;
       &lt;li&gt;&lt;input rel="name" type="checkbox" value="Bobby"&gt;&lt;label for="cb1"&gt;Bobby&lt;/label&gt;&lt;/li&gt;
       &lt;li&gt;&lt;input rel="name" type="checkbox" value="Henry"&gt;&lt;label for="cb1"&gt;Henry&lt;/label&gt;&lt;/li&gt;
      &lt;/ul&gt;
     &lt;/div&gt;
    &lt;/div&gt;
    
    &lt;div id="body"&gt;
      
  
  &lt;table&gt;
      &lt;tr id="ProductID" class="first"&gt;
          &lt;th&gt;NAME&lt;/th&gt;
          &lt;th&gt;INPUT&lt;/th&gt;
          &lt;th&gt;MAIN VALUE&lt;/th&gt;
          &lt;th&gt;DIFF&lt;/th&gt;
   &lt;th&gt;DIFF /100&lt;/th&gt;
          &lt;th&gt;MV /100&lt;/th&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>05)</strong> The filter works if I put static data into it. </p>
  
  <p>So, in the HTML code, in the filter section I put this : </p>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt;&lt;input rel="name" type="checkbox" value="Debra"&gt;&lt;label for="cb1"&gt;Debra&lt;/label&gt;&lt;/li&gt;
      &lt;li&gt;&lt;input rel="name" type="checkbox" value="Julie"&gt;&lt;label for="cb1"&gt;Julie&lt;/label&gt;&lt;/li&gt;
      &lt;li&gt;&lt;input rel="name" type="checkbox" value="Norma"&gt;&lt;label for="cb1"&gt;Norma&lt;/label&gt;&lt;/li&gt;
      &lt;li&gt;&lt;input rel="name" type="checkbox" value="Bobby"&gt;&lt;label for="cb1"&gt;Bobby&lt;/label&gt;&lt;/li&gt;
      &lt;li&gt;&lt;input rel="name" type="checkbox" value="Henry"&gt;&lt;label for="cb1"&gt;Henry&lt;/label&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>and then the filter works fine. I am guessing the problem is in the JS code.<br>
  I guess in the first function where I load the JSON data I have to replace this line in order to trigger the second function : </p>
  
  <p><a href="https://i.stack.imgur.com/RCekP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RCekP.png" alt="enter image description here"></a></p>
  
  <p><strong><em>UPD</em></strong> : The code is show below : </p>
  
  <pre><code>$.getJSON(
       'http://apolosiskos.co.uk/TEB/MOCK_DATA.json',
       function(data){
           var tr;
           $.each (data, function (key, val) {
              tr = $('&lt;tr/&gt;');
              tr.append('&lt;td class="name" rel="' + val.first_name + '"&gt;' + val.first_name + '&lt;/td&gt;');
              tr.append('&lt;td &gt;&lt;input class="metric1"/&gt;' + '&lt;/td&gt;');
              tr.append('&lt;td class="metric2" &gt;' + val.id + '&lt;/td&gt;');
              tr.append('&lt;td class="metric3"&gt;&lt;span class="multTotal"&gt;' +'0.00'+ '&lt;/span&gt;&lt;/td&gt;');
          tr.append('&lt;td class="metric3-100"&gt;&lt;span class="metric3-100"&gt;' +'0.00'+ '&lt;/span&gt;&lt;/td&gt;');
          tr.append('&lt;td class="metric1-100"&gt;&lt;span class="metric1-100"&gt;' +'0.00'+ '&lt;/span&gt;&lt;/td&gt;');
              $('table').append(tr);
           });
  
           $.each (data, function (key, val) {
              li = $('&lt;li/&gt;');
              li.append('&lt;input rel="name" type="checkbox" value="' + val.first_name + '"&gt;&lt;label for="cb1"&gt;' + val.first_name + '&lt;/label&gt;&lt;/li&gt;');
              $('ul').append(li);
           });
         });
  
  $('body').on('input', 'input:checkbox', filters);
  
  function filters(){
      var showAll = true;
      $('tr').not('.first').hide();
      $('input[type=checkbox]').each(function () {
          if ($(this)[0].checked) {
              showAll = false;
              var dimension1= $(this).attr('rel');
              var value = $(this).val();            
              $('td.' + dimension1+ '[rel="' + value + '"]').parent('tr').show();
          }
      });
      if(showAll){
          $('tr').show();
      }
  };
  
  $("input:checkbox").click(filters);
  </code></pre>