title: How to add new table rows and columns with table headers to CSS table
body: <p>I have the following table format and would like to be able to add new columns and new rows based on user inputs.</p>
  
  <p>The clickable part of the document basically consists of a list of names that will be the far left item of each row.  Additionally there is a second clickable area that should add elements horizontally to each row adding a table header as it adds a new column.</p>
  
  <p>For example:</p>
  
  <p>List of names:
  [Jeff] [bill] [fred] [jake]</p>
  
  <p>List of items to be added to each column:
  [apples] [oranges] [cars] [shoes]</p>
  
  <p>If Jeff and bill were selected and apples and oranges were selected the table should be updated to look as such.</p>
  
  <pre class="lang-none prettyprint-override"><code>[Name] [apples] [oranges]
  [jeff] [      ] [       ]
  [bill] [      ] [       ]
  </code></pre>
  
  <p>If then another item was selected it would look as such</p>
  
  <pre class="lang-none prettyprint-override"><code>[Name] [apples] [oranges] [shoes]
  [jeff] [      ] [       ] [     ]
  [bill] [      ] [       ] [     ]
  </code></pre>
  
  <p>Additionally if another name was selected at this point it should look as such</p>
  
  <pre class="lang-none prettyprint-override"><code>[Name] [apples] [oranges] [shoes]
  [jeff] [      ] [       ] [     ]
  [bill] [      ] [       ] [     ]
  [fred] [      ] [       ] [     ]
  </code></pre>
  
  <p>This is what the html structure looks like:  </p>
  
  <pre><code>&lt;form&gt;
      &lt;div id="opTable"&gt; 
          &lt;div class="thead"&gt;
              &lt;div class="th first"&gt;
                  Name
              &lt;/div&gt;
              &lt;div class="th"&gt;
                  clase
              &lt;/div&gt;
              &lt;div class="th"&gt;
                  gold
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="tbody"&gt; 
              &lt;div class="tr"&gt; 
                  &lt;div class="td first"&gt;
                      Billy
                  &lt;/div&gt;
                  &lt;div class="td"&gt;
                      &lt;input type="text" style="width:100px"/&gt;
                  &lt;/div&gt;
                  &lt;div class="td"&gt;
                      &lt;input type="text" style="width:100px"/&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Additionally, the code should be able to remove a name and or item in the same ways.  I hope my question is clear enough.  </p>