JSFiddle - React, Tailwind, and code Playground

by fiddleyetu

HTML

<form action="index.php" method="post">
<table class="myTable" id="cup">
<tbody>
    <tr><td class="header" colspan="6">YOUR SELECTIONS</td></tr>
    <tr><td>4</td><td>7</td><td>89</td><td>98</td><td>56</td><td>99</td></tr> 
    <tr><td>44</td><td>27</td><td>839</td><td>918</td><td>16</td><td>19</td></tr>
    <tr><td>14</td><td>17</td><td>189</td><td>198</td><td>561</td><td>199</td></tr>
    <tr><td>94</td><td>97</td><td>899</td><td>989</td><td>956</td><td>999</td></tr>
    <tr><td>64</td><td>67</td><td>896</td><td>68</td><td>6</td><td>87</td></tr>
</tbody>
</table>
<input type="submit" value="submit">
</form>

JavaScript

$(function() {
    $('form').on('submit', function( event ) {
        event.preventDefault();
        var myData = [],
            keys = ['ID','Selection1','Selection2','Selection3','Selection4','Selection5','Selection6' ],
            url = this.action;
        $('table').find('tr:gt(0)').each(function( i, row ) {
           var oRow = {};
           $( row ).find( 'td' ).each( function( j, cell ) {
              oRow[ keys[ j ] ] = $( cell ).text();
           });
           myData.push( oRow );
        });
        console.log( myData );
        console.log( JSON.stringify( myData ) );
        //myData = [ {"ID":"3u3y","Selection1",....},{"ID":"jdjdj",...}.... ]
        //now you can use one key to send all the data to your server
        $.post( url, { mydata: JSON.stringify( myData ) }, function(d) { 
           alert( 'done' ); 
        });
    });
});