title: Jquery displaying rows depending on cell values
body: <p>I have 2 tables on web app
  <a href="https://puu.sh/wTMeJ/911d4cc844.png" rel="nofollow noreferrer">https://puu.sh/wTMeJ/911d4cc844.png</a>
  First one shows product id and the quantity of products. The second one is showing products ordered. (ordered objects are not subtracted from the first table)
  I need to be displaying from the first table only those rows, that are not out of stock. 
  So for example, the first two rows should not be displayed. 
  (also, data is inserted from database, if that's important)</p>
  
  <p>i have tried the following jquery to achieve this, but unsuccesfully. It had no effect. not sure how else to approach it. </p>
  
  <pre><code>$(document).ready(function(){
  Determine();
  });
  
  //Determine which products are still in stock and hide them
  
  function Determine() {
      var id1,
          id2,
          sum = 0;
      $("td.ProductID1").each(function(){
          id1 = parseInt($(this).text());
          sum = 0;
          $("td.ProductID2").each(function(){
              id2 = parseInt($(this).text());
              if(id1 == id2){
                  sum += parseInt($(this).closest('tr').children('td:nth-child(2)').text());
              }
          }
          );
          if(sum &gt;= parseInt($(this).closest('tr').children('td:nth-child(5)').text())){
              $(this).closest('tr').hide();
          }
  
      });
  }
  </code></pre>
  
  <p>also, ProductID1 are all td objects of first table containing ID and ProductID2 are all td objects containing id in table 2</p>
  
  <p>EDIT:
  adding HTML
  data-object-id is used to add data from database to tables</p>
  
  <pre><code>&lt;div class="container"&gt;   
  &lt;div &gt;
  &lt;div data-object-id="dsProducts"&gt;
  
      &lt;div data-items-info class="pull-right"&gt;&lt;/div&gt;
      &lt;input data-search style="width:250px" class="form-control" placeholder="Filter..."&gt;
  
      &lt;table class="table m-y-1" data-grid&gt;
          &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th style="width:32px;"&gt;&lt;/th&gt;
                  &lt;th style="width:110px;" data-field-popup="ProductID" &gt; Product I D&lt;/th&gt;
                  &lt;th style="width:16%;" data-field-popup="ProductName"&gt; Product Name&lt;/th&gt;
                  &lt;th style="width:16%;" data-field-popup="Price"&gt; Price&lt;/th&gt;
                  &lt;th style="width:16%;" data-field-popup="Supplier"&gt; Supplier&lt;/th&gt;
                  &lt;th style="width:110px;" data-field-popup="Quantity"&gt; Quantity&lt;/th&gt;
                  &lt;th style="width:110px;" data-field-popup="Storage"&gt; Storage&lt;/th&gt;
                  &lt;th style="width:32px;" data-excel data-tooltip="Export to Excel"&gt;&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
  
          &lt;tbody&gt;
              &lt;tr data-repeat data-show-new data-active&gt;
                  &lt;td data-selection-cell&gt;&lt;/td&gt;
                  &lt;td class = "ProductID1"&gt;&lt;input data-field="ProductID" type="number"&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;input data-field="ProductName" type="text"&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;input data-field="Price" type="number"&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;input data-field="Supplier" type="text"&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;input data-field="Quantity" type="number"&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;input data-field="Storage" type="number"&gt;&lt;/td&gt;
                  &lt;td data-action-cell&gt;&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
  
  &lt;/div&gt;
  &lt;div data-object-id="dsOrdersLines" &gt;
      &lt;div data-items-info class="pull-right"&gt;&lt;/div&gt;
  
  
  
      &lt;div class="table-responsive m-y-1" id = "OrdersLinesTable"&gt;
          &lt;table class="table"&gt;
              &lt;thead&gt;
                  &lt;tr&gt;
                      &lt;th style="width:110px;"&gt; Product I D&lt;/th&gt;
                      &lt;th style="width:110px;"&gt; Amount&lt;/th&gt;
                  &lt;/tr&gt;
              &lt;/thead&gt;
  
              &lt;tbody&gt;
  
                  &lt;tr data-repeat data-active&gt;
                      &lt;td data-field="ProductID" class = "ProductID2"&gt;&lt;/td&gt;
                      &lt;td data-field="Amount" class = "Amount"&gt;&lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/tbody&gt;
          &lt;/table&gt;
      &lt;/div&gt;
  
  
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>