JSFiddle - React, Tailwind, and code Playground

HTML

<table id="table">
    <tr>
      <th>(empty)</th>
      <th>Heading 1</th>
      <th>Heading 2</th>
    </tr>
 <tr>
  <th>Heading A</th>
     <td>content for 1 and A</td>
     <td>content for 2 and A</td>
 </tr>
 <tr>
  <th>Heading B</th>
     <td>content for 1 and B</td>
     <td>content for 2 and B</td>
 </tr>
 <tr>
  <th>Heading C</th>
     <td>content for 1 and C</td>
     <td>content for 2 and C</td>
 </tr>
</table>


<button id="toggle">Toggle</button>

JavaScript

function transpose(table){
    var rows = [];
    var tableString = '';
    table.find('tr').each(function(i,row){
        var rowArray = [];
        row = $(row);
        row.find('th,td').each(function(i,cell){
            cell = $(cell);
            rowArray.push({
                value : cell.text(),
                type : cell.is('th') ? 'th':'td'
            })
        })
        rows.push(rowArray);
    });
    rows.forEach(function(row){
        tableString += '<tr>';
        row.forEach(function(cell){
           tableString += '<' + cell.type + '>';
           tableString += cell.value;
           tableString += '</' + cell.type + '>';  
        })
        tableString += '</tr>';
    });
    return tableString;
}



$(document).ready(function(){
    $("#toggle").click(function(e){
        var transposed = transpose($('#table'));
        $('#table').empty().append(transposed);
    })
});