JSFiddle - React, Tailwind, and code Playground

by Vince Oveson

HTML

<div>
    <table>
        <tr>
            <td><button data-user="first">First User</button></td>
            <td><button data-user="second">Second User</button></td>
            <td><button data-user="third">Third User</button></td>
            <td><button data-user="fourth">Fourth User</button></td>
        </tr>
    </table>
    <div class="container"></div>
</div>

CSS

.container {
    border-radius: 5px;
    border: solid 1px black;
    height: 30px;
    width: 200px;
    margin: 10px;
    padding: 10px;
}

JavaScript

var first_user_strings = ["I", "am", "the", "first", "user"];
var second_user_strings = ["I", "am", "the", "second", "user"];
var third_user_strings = ["I", "am", "the", "third", "user"];
var fourth_user_strings = ["I", "am", "the", "fourth", "user"];

$('button').on('click', function(e) {
    var user = $(this).data('user');
    
    switch(user)
    {
        case "first":
            output_strings(first_user_strings);
            break;
        case "second":
            output_strings(second_user_strings);
            break;
        case "third":
            output_strings(third_user_strings);
            break;
        case "fourth":
            output_strings(fourth_user_strings);
            break;
    }
});

function output_strings(source_array)
{    
    var container = $('.container');
    var output = "";
    
    $.each(source_array, function(i, string) {
        output += string + ' ';
    });
    
    container.text(output);
}