title: add tr by ajax if not exists
body: <p>So this is my setup. I have a blank table and a button. When i hit the button, i will query my database via ajax and get a JSON back. I itterate trough the JSON and add rows to my table. However, the user can delete a table row. When he hit the button again i want to make sure only the deleted table is appended to the table.</p>
  
  <p>This is what i have now HTML:</p>
  
  <pre><code>&lt;table class="table table-striped table-hover" id='tableBoodschappen'&gt;
  
  &lt;/table&gt;
  &lt;button type="button" class="btn btn-primary" id='opslaan' disabled&gt;Opslaan&lt;/button&gt;
  </code></pre>
  
  <p>This is my JQuery</p>
  
  <pre><code>$(document).ready(function() {
      $("#getData").click(function() {
          $.ajax({url: "ajax/htmlBoodschappen.php", 
              dataType: 'json',
              success: function(result){  
                  if(result[0].voorraadID &gt;0) {
                      var $append='';
                      $.each(result, function(i,item) {
                          if($("tr#"+item.productID).length==0) {
                          var aantal=parseInt(item.min)-parseInt(item.aantal)
                          $append+="&lt;tr id='"+item.productID+"' class='voorraad data'&gt;"
                              +"&lt;td style='vertical-align: middle;width:60px' class='aantal'&gt;"
                                  +"&lt;span class='aantal'&gt;"+aantal+"&lt;/span&gt;x "
                                  +"&lt;div class='btn-group-vertical btn-group-xs btn-group-hover' role='group' style='display:none'&gt;"
                                      +"&lt;button type='button' class='btn btn-primary chevron-up-aantal'&gt;"
                                          +"&lt;span class='glyphicon glyphicon-chevron-up'&gt;&lt;/span&gt;"
                                      +"&lt;/button&gt;"
                                      +"&lt;button type='button' class='btn btn-primary chevron-down-aantal'&gt;"
                                          +"&lt;span class='glyphicon glyphicon-chevron-down'&gt;&lt;/span&gt;"
                                      +"&lt;/button&gt;"
                                  +"&lt;/div&gt;"
                              +"&lt;/td&gt;"
                              +"&lt;td style='display:none' class='voorraadID'&gt;&lt;input type='text'  id='"+item.voorraadID+"'&gt;&lt;/td&gt;"
                              +"&lt;td style='vertical-align: middle;'&gt;"+item.artikelNaam+"&lt;/td&gt;"
                              +"&lt;td style='vertical-align: middle;'&gt;"+item.artikelMerk+"&lt;/td&gt;"
                              +"&lt;td style='vertical-align: middle;'&gt;"+item.inhoud+" "+item.type+"&lt;/td&gt;"
                              +"&lt;td style='vertical-align: middle;'&gt;&lt;button type='button' class='close remove' aria-label='Close'&gt;&lt;span aria-hidden='true'&gt;&amp;times;&lt;/span&gt;&lt;/button&gt;"
                          +"&lt;/tr&gt;";
                          }
                      });
                      $("#tableBoodschappen").append($append);                            $("#getData").prop("disabled", true);
                      $("#opslaan").prop("disabled", false);
                  } else {
                      //alert('error');
                  }
              }
          });
      });
  });
  </code></pre>
  
  <p>So when i hit the button the table is altered. When i hit the x button, the tr is removed. But when i hit the add button again, it says that the removed row still exists. Any sugestions?</p>