JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <button onclick="showTable(4,X,'a');">Show Table</button>
    <button onclick="showTable(4,X,'b');">Show Table</button>
    <div id="elem">
        
        
        
    </div>
    
</body>

JavaScript

var X = {
    a: [{
        name: "john",
        phone: 777},
    {
        name: "john",
        phone: 777},
    {
        name: "john",
        phone: 777}],
    b: [{
        name: "jane",
        phone: 777},
    {
        name: "jane",
        phone: 777},
    {
        name: "jane",
        phone: 777}],
    c: [{
        name: "bill",
        phone: 777},
    {
        name: "bill",
        phone: 777},
    {
        name: "bill",
        phone: 777}],
    d: [{
        name: "kyle",
        phone: 777},
    {
        name: "kyle",
        phone: 777},
    {
        name: "kyle",
        phone: 777}]
}

function showTable(trnum, X, row) {
    var Tablecode = "<table><tbody>";
    console.log(X[row]);
    for (var i = 0; i < X[row].length; i++) {
        for (var j = 0; j < trnum; j++) {
            Tablecode += "<tr><td>" + X[row][i].name + "</td><td>" + X[row][i].phone + "</td></tr>";
        }

    }
    Tablecode += "</tbody></table>";
    $("#elem").append(Tablecode);
}