added multiTable option to stackcolumns() to split final output

[LordPachelbel]

I added a multiTable option to .stackcolumns() to split the final output into multiple tables:

$('.comparison').stackcolumns({
  myClass: 'comparison,
  multiTable: true
});

Example:

<table class="comparison">
  <caption class="sr-only">Comparison table of data and stuff.</caption>
  <thead>
    <tr>
      <th scope="col"></th>
      <th scope="col">Column Heading 1</th>
      <th scope="col">Column Heading 2</th>
      <th scope="col">Column Heading 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Row Heading 1</th>
      <td>data</td>
      <td>data</td>
      <td>data</td>
    </tr>
    <tr>
      <th scope="row">Row Heading 2</th>
      <td>more data</td>
      <td>more data</td>
      <td>more data</td>
    </tr>
    <tr>
      <th scope="row">Row Heading 3</th>
      <td>still more data</td>
      <td>still more data</td>
      <td>still more data</td>
    </tr>
    <tr>
      <th scope="row">Row Heading 4</th>
      <td>even more data</td>
      <td>even more data</td>
      <td>even more data</td>
    </tr>
    <tr>
      <th scope="row">Row Heading 5</th>
      <td>final data</td>
      <td>final data</td>
      <td>final data</td>
    </tr>
  </tbody>
</table>

When multiTable is false or undefined, .stackcolumns() creates a single two-column table as usual:

<table class="stacktable small-only comparison">
  <tbody>
    <tr class="st-head-row st-head-row-main">
      <th scope="col" class="st-key"></th>
      <th scope="col" class="st-val">Column Heading 1</th>
    </tr>
    <tr>
      <th scope="row" class="st-key">Row Heading 1</th>
      <td class="st-val">data</td>
    </tr>
    <tr>
      <th scope="row" class="st-key">Row Heading 2</th>
      <td class="st-val">more data</td>
    </tr>
    <tr>
      <th scope="row" class="st-key">Row Heading 3</th>
      <td class="st-val">still more data</td>
    </tr>
    <tr>
      <th scope="row" class="st-key">Row Heading 4</th>
      <td class="st-val">even more data</td>
    </tr>
    <tr>
      <th scope="row" class="st-key">Row Heading 5</th>
      <td class="st-val">final data</td>
    </tr>
    <tr class="st-head-row st-head-row-main">
      <th scope="col" class="st-key"></th>
      <th scope="col" class="st-val">Column Heading 2</th>
    </tr>
    <tr>
      <th scope="row" class="st-key">Row Heading 1</th>
      <td class="st-val">data</td>
    </tr>
    <tr>
      <th scope="row" class="st-key">Row Heading 2</th>
      <td class="st-val">more data</td>
    </tr>
    <tr>
      <th scope="row" class="st-key">Row Heading 3</th>
      <td class="st-val">still more data</td>
    </tr>
    <tr>
      <th scope="row" class="st-key">Row Heading 4</th>
      <td class="st-val">even more data</td>
    </tr>
    <tr>
      <th scope="row" class="st-key">Row Heading 5</th>
      <td class="st-val">final data</td>
    </tr>
    <tr class="st-head-row st-head-row-main">
      <th scope="col" class="st-key"></th>
      <th scope="col" class="st-val">Column Heading 3</th>
    </tr>
    <tr>
      <th scope="row" class="st-key">Row Heading 1</th>
      <td class="st-val">data</td>
    </tr>
    <tr>
      <th scope="row" class="st-key">Row Heading 2</th>
      <td class="st-val">more data</td>
    </tr>
    <tr>
      <th scope="row" class="st-key">Row Heading 3</th>
      <td class="st-val">still more data</td>
    </tr>
    <tr>
      <th scope="row" class="st-key">Row Heading 4</th>
      <td class="st-val">even more data</td>
    </tr>
    <tr>
      <th scope="row" class="st-key">Row Heading 5</th>
      <td class="st-val">final data</td>
    </tr>
  </tbody>
</table>

When multiTable is true, .stackcolumns() creates a separate two-column table for each data column in the original table:

<table class="stacktable small-only comparison stacktable-0">
  <tbody>
    <tr class="st-head-row st-head-row-main">
      <th scope="col" class="st-key"></th>
      <th scope="col" class="st-val">Column Heading 1</th>
    </tr>
    <tr>
      <th scope="row" class="st-key">Row Heading 1</th>
      <td class="st-val">data</td>
    </tr>
    <tr>
      <th scope="row" class="st-key">Row Heading 2</th>
      <td class="st-val">more data</td>
    </tr>
    <tr>
      <th scope="row" class="st-key">Row Heading 3</th>
      <td class="st-val">still more data</td>
    </tr>
    <tr>
      <th scope="row" class="st-key">Row Heading 4</th>
      <td class="st-val">even more data</td>
    </tr>
    <tr>
      <th scope="row" class="st-key">Row Heading 5</th>
      <td class="st-val">final data</td>
    </tr>
  </tbody>
</table>

<table class="stacktable small-only comparison stacktable-1">
  <tbody>
    <tr class="st-head-row st-head-row-main">
      <th scope="col" class="st-key"></th>
      <th scope="col" class="st-val">Column Heading 2</th>
    </tr>
    <tr>
      <th scope="row" class="st-key">Row Heading 1</th>
      <td class="st-val">data</td>
    </tr>
    <tr>
      <th scope="row" class="st-key">Row Heading 2</th>
      <td class="st-val">more data</td>
    </tr>
    <tr>
      <th scope="row" class="st-key">Row Heading 3</th>
      <td class="st-val">still more data</td>
    </tr>
    <tr>
      <th scope="row" class="st-key">Row Heading 4</th>
      <td class="st-val">even more data</td>
    </tr>
    <tr>
      <th scope="row" class="st-key">Row Heading 5</th>
      <td class="st-val">final data</td>
    </tr>
  </tbody>
</table>

<table class="stacktable small-only comparison stacktable-2">
  <tbody>
    <tr class="st-head-row st-head-row-main">
      <th scope="col" class="st-key"></th>
      <th scope="col" class="st-val">Column Heading 3</th>
    </tr>
    <tr>
      <th scope="row" class="st-key">Row Heading 1</th>
      <td class="st-val">data</td>
    </tr>
    <tr>
      <th scope="row" class="st-key">Row Heading 2</th>
      <td class="st-val">more data</td>
    </tr>
    <tr>
      <th scope="row" class="st-key">Row Heading 3</th>
      <td class="st-val">still more data</td>
    </tr>
    <tr>
      <th scope="row" class="st-key">Row Heading 4</th>
      <td class="st-val">even more data</td>
    </tr>
    <tr>
      <th scope="row" class="st-key">Row Heading 5</th>
      <td class="st-val">final data</td>
    </tr>
  </tbody>
</table>