JSFiddle - React, Tailwind, and code Playground

HTML

<span id="sp1">Table 1</span>
        <table style="width:100%" id="t1">
                <tr>
                    <td>
                        element.errorCode
                    </td>
                    <td>
                        element.ruleCode
                    </td>
                </tr>$
        </table>
        <span id="sp2">Table 2</span>
        <table style="width:100%" id="t2">
                <tr>
                    <td>
                        element.errorCode
                    </td>
                    <td>
                        element.ruleCode
                    </td>
                </tr>
        </table>

JavaScript

function showTable(table){
        var tables =['t1','t2'];
        for(var i=0;i<2;i++){
            $(tables[i]).hide();
        }
        $(t1).append("<tr><th>ERROR_CODE</th><th>RULE_CODE</th></tr>");
        $(t1).show();
    }

    $( document ).ready(function() {
        for (var i = 0; i<2; i++) {
            $(sp1).bind('click', function () {
                showTable(t1);
            });
        }
    });