JSFiddle - React, Tailwind, and code Playground

by FANTAzeRus

HTML

<body>
    <div id='test'></div>
</body>

CSS

#test {
}
.test_line {
    display: inline-block;
    vertical-align: middle;
    border: 1px solid #999;
    border-radius: 3px;
    width: 150px;
    cursor: pointer;
    margin: 0 3px 0 0;
    text-align: center;
    font: 12px verdana;
}

JavaScript

var test = {
    init: function () {
        this.buttons = [{
            title: 'button 1',
            val: 3
        }, {
            title: 'button 2',
            val: 45
        }, {
            title: 'button 3',
            val: 65
        }]
        this.draw()
    },

    draw: function () {
        var that = this
        for (var i = 0; i < this.buttons.length; i++) {
            var but = $('<span>', {
                id: 'test_' + i,
                eid: i,
                class: 'test_line',
                html: this.buttons[i].title,
                click: function (i) {
                    that.act(that.buttons[$(this).attr('eid')].val)
                }
            })
            $('#test').append(but)
        }
    },

    act: function (val) {
        alert(val)
    }
}

$(document).ready(

function () {
    test.init()
})