title: Adding data from JSON url using messes up with the queries (HTML table)
body: <p>A short description :</p>
  
  <p><strong>01)</strong> I dynamically load data from a JSON url into an HTML table. The script is in the external <code>.js</code> file called in the header of the <code>HTML</code> file.</p>
  
  <p><strong>02)</strong> I filter the results using a filter at the top of the page for the first column (NAME). The script works if I include it in the HTML file under the <code>&lt;script&gt;</code> tag but it does not work when I put all functions in an external <code>.js</code> file.</p>
  
  <p>The link is shown here : <a href="http://apolosiskos.co.uk/TEB/test.html" rel="nofollow noreferrer">LINK</a></p>
  
  <p>And the JS script is here : </p>
  
  <pre><code>    //It loads the data from the JSON file 
  $.getJSON(
       'http://apolosiskos.co.uk/TEB/MOCK_DATA.json',
       function(data){
           var tr;
  //It loads data from the JSON file to the table
           $.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;' + 'TEST' + '&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);
           });
         });
  
  //The filter function for the first column (NAME)
  $("input:checkbox").click(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();
      }
  });
  
  $('body').on('input', 'input:checkbox', filters);
  </code></pre>