title: add a row to a specific table created dynamically by user
body: <p>I am creating a site to manipulate data on multiple tables that are created with jquery.... most tables will be added by the user when they are on the page.</p>
  
  <p>I am also very new to jquery and javascript - so I may be missing something basic here.</p>
  
  <p>I have been able to get buttons created along with the table headers and then added classes to both the table and the button. I would like to be able to add editable rows and columns to each table by clicking on the correlating button, however I cannot find a way to link the two together whether it is by class or some other means.</p>
  
  <p>Here is the code that I have that adds the table: </p>
  
  <pre><code>$("button.agentPerson").on("click", function() {
    var $newAgent = $('input.agentPerson').val();
  
    if ($('input.agentPerson').val() !== "") {
      $("div.commissionInfo").append("&lt;br/&gt;&lt;br/&gt;&lt;table&gt;&lt;tr&gt;&lt;th&gt;Address&lt;/th&gt;&lt;th&gt;Contract Date&lt;/th&gt;&lt;th&gt;Production&lt;/th&gt;&lt;/tr&gt;&lt;button&gt;New Deal&lt;/button&gt;&lt;/table&gt;&lt;br/&gt;");
  
      $("tbody:last-child").addClass($newAgent);
      $("button:last-child").addClass($newAgent);
      $("select.addToThis").append($('&lt;option&gt;', {
        value: $newAgent,
        text: $newAgent,
      }));
  
    }
  });
  </code></pre>
  
  <p>I have also on the page a dropdown which I would eventually want to be able to hide all tables beside the one chosen. I figure that will be simple once I figure out how to link the two together through classes.</p>
  
  <p>Thank you. If you need any further code please let me know.</p>
  
  <p>I just found the .closest and .parent methods, but I cannot get them to work either.</p>
  
  <p>Here is my most recent attempt to get a button to append to a table.</p>
  
  <pre><code>$("body").on("click", "button", function(event) {
    var $theTable = $(this).closest("tbody");
  
    $theTable.append("&lt;tr&gt;&lt;/tr&gt;&lt;tr&gt;&lt;/tr&gt;&lt;tr&gt;&lt;/tr&gt;");
  });
  </code></pre>