title: jQuery Adding and Removing Rows Trouble
body: <p>I'm trying to create a new use for an already implemented tool we use here at work, but I'm very sure I'm doing something wrong.</p>
  
  <p>I can't figure out how to make it delete a row. And even more, I can figure out how to clone everything within .pt-entry, and have it replicated inside of the incremental .pt-entry...but without the user filled in info.</p>
  
  <p>Hopefully this makes sense.</p>
  
  <p>You can check out my <a href="http://cdpn.io/ccc85f9afe25977bca9b414945df8174" rel="nofollow noreferrer">Pen here</a>, but here's the code breakdown for the rest of yous:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;table class="manage-pt" id="0"&gt;
      &lt;tr class="pt-entry"&gt;
          &lt;td class="pt-toggle-group"&gt;
              &lt;input type="button" class="pt-button togPTbutton" value="?" /&gt;
              &lt;input type="button" class="pt-button addPTbutton" value="+" /&gt; 
              &lt;input type="button" class="pt-button delPTbutton" value="-" /&gt;
          &lt;/td&gt;
          &lt;td class="pt-values"&gt;
              &lt;div&gt;
                  &lt;input type="text" class="vendor" placeholder="Vendor Name" /&gt;
              &lt;/div&gt;
              &lt;div&gt;
                  &lt;textarea class="ptCode" name="ptCode" placeholder="Pixel Tag Code" &gt;&lt;/textarea&gt;
              &lt;/div&gt;
              &lt;div class="page-select"&gt;
                  &lt;select&gt;
                      &lt;option value="AllPages"&gt;All Pages&lt;/option&gt;
                      &lt;option value="HomePage"&gt;HomePage&lt;/option&gt;
                      &lt;option value="VehicleDetailsPage"&gt;VehicleDetailsPage&lt;/option&gt;
                      &lt;option value="VehicleSearchResults"&gt;VehicleSearchResults&lt;/option&gt;
                      &lt;option value="ContactUsForm"&gt;ContactUsForm&lt;/option&gt;
                  &lt;/select&gt;
              &lt;/div&gt;
              &lt;div class="area-checkboxes"&gt;
                  &lt;p class="wheretosave"&gt;Where?&lt;/p&gt;
                  &lt;input type="checkbox" name="head" /&gt;&lt;label for="head"&gt;Head&lt;/label&gt; 
                  &lt;input type="checkbox" name="body" /&gt;&lt;label for="body"&gt;Body&lt;/label&gt;
              &lt;/div&gt;
              &lt;div class="save-pt"&gt;
                  &lt;input value="SAVE" type="submit" /&gt;
              &lt;/div&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>JavaScript:</p>
  
  <pre><code>// HIDES CURRENT PT &amp; CHANGES TOGGLE BUTTON ICON WHEN CLICKED
  $('.togPTbutton').click(function(){
      $('.pt-values').slideToggle(25, function() {
          if ($('.pt-values').is(':hidden')) {
              $('input.togPTbutton').val('?');
          }else{
              $('input.togPTbutton').val('?');
          }
      });
  });
  
  $(document).ready(function () {
      var table = $('.manage-pt'),
          rows = $(table).find('tr'),
          rowCount = $(rows).length,
          addedRow = $(document.createElement('tr')),
          addButton = $('.addPTbutton'),
          removeButton = $('.delPTbutton');
  
      function addRow(){
          var thisRow = $(addedRow).clone(true);
          $(thisRow).attr('class','.pt-entry-' + rowCount);
          rowCount += 1;
          $(thisRow).html('&lt;td&gt;row&lt;/td&gt;');
          $(table).append(thisRow);
      }
  
      function removeRow(){
          var items = $(table).querySelectorAll('tr');
          if (rowCount &gt; 1) {
              $(table).remove(items[rowCount - 1]);
              rowCount -= 1;
          }else{
              alert('CANNOT DELETE LAST ROW');
          }
      }
  
      addButton.click(function(e){
          addRow();
      });
  
      removeButton.click(function(e){
          removeRow();
      });
  });
  </code></pre>
  
  <p>Should look close to something like this mockup ...
  <img src="https://i.stack.imgur.com/DpGiD.jpg" alt="enter image description here"></p>