JSFiddle - React, Tailwind, and code Playground

HTML

<table id="mytable" class="table">
    <thead> <b><tr><th>Header1</th><th>Header2</th><th>Header3</th><th>Header4</th></tr></b>

    </thead>
    <tr>
        <td>value1</td>
        <td>value1</td>
        <td>
          value3
        </td>
        <td>
            <br/>
            <br/>
            <button id="buttonvalues" type="button" class="btn-primary">GetValues</button>
        </td>
    </tr>
</table>

JavaScript

$("#mytable").on("click", ".btn-primary", function () {
    var values = [];
    var $header = $(this).closest('table').find('thead th');
    var $cols   = $(this).closest('tr').find('td');
    
    $header.each(function(idx,hdr) {
        var $curCol = $cols.eq(idx);
        var $labels = $curCol.find('label');
        var value;
        
        if($labels.length) {
            value = {};
            $labels.each(function(lblIdx, lbl) {
                value[$(lbl).text().trim()] = $(lbl).find('input').is(':checked');
            });
        } else {
            value = $curCol.text().trim();
        }
        values.push( { name: $(hdr).text(), value: value } );
    });

    console.log(JSON.stringify(values, null, 2));
});