JSFiddle - React, Tailwind, and code Playground

HTML

<div id="table">
    <table>
        <thead>
            <tr>
                <th>Column A</th>
                <th id="flex-header">Column B</th>
            </tr>
        </thead>
        <tbody>
            <tr>
               <td>Name:</td>
                
            </tr>
            <tr>
              <td>Eail:</td>
               
            </tr>
            <tr>
              <td>Mobile:</td>
               
            </tr>
        </tbody>
    </table>
</div>
<button value="3">3</button>
<button value="7">7</button>

CSS

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

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 table tbody").html("").append(data);
    });
});