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;
}

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 b=this.buttons[i]
			var but=$('<span>',{
				id: 'test_'+i,
				class: 'test_line',
				html: this.buttons[i].title,
				click: function() {
					that.act(b.val)
				}
			})
			$('#test').append(but)
		}
	},

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

$(document).ready(
	function(){
		test.init()
	}
)