JSFiddle - React, Tailwind, and code Playground

by jesus_tesh

HTML

<div id="table">
    <table>
        <thead>
            <tr>
                <th>Column A</th>
                <th id="flex-header">Column B</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td></td>
                <td></td>
            </tr>
        </tbody>
    </table>
</div>
<button value="3">3</button>
<button value="7">7</button>
<button id="clear">Clear</button>

CSS

table {
    width: 100%;
    height: 100px;
    border: 1px solid black;
    display: none;
}
table thead th {
    width: 50%;
}
#clear { display: none; }

JavaScript

$(function () {
    $("button").click(function (e) {
        var cols = $(this).val();
        
        // You'll want to do something here to get the column data
        var data = $("<tr></tr>").append($("<td>Col 0</td>"));
        for (i = 0; i < cols; i++) {
            data.append($("<td>Col " + (i + 1) + "</td>"));
        }
        $("#flex-header").prop("colspan", cols);
        $("table").show();
        $("#clear").show();
        $("#table table tbody").html("").append(data);
    });
    
    $("#clear").click(function () {
       $("table").hide();
        $(this).hide();
    });
});