JSFiddle - React, Tailwind, and code Playground

HTML

<html>
	<head>
		<script type="text/javascript">
			class test {
				constructor() {
					this.obj = document.createElement('div');
					let style = {'padding' : '5px'};

					this.obj.innerHTML = '<h3>Click the button:</h3>';
					for (let key in style) {
						this.obj.style[key] = style[key]; 
					}

					this.some_var = 55;
					this.update_state.call(this, 'test');
					this.update_state_working.call(this, 'test');
				}

				update_state(state) {
					//let test_var = this.some_var;
					if (state == 'test') {
						const frame = document.createElement('div');
						frame.innerHTML = '<input style="background-color: #00FF00;" type="submit" value="Not working" />';
						frame.onclick = function(event) {
							console.log('You pressed: ' + this.some_var);
						};
						this.obj.appendChild(frame);
					}
				}

				update_state_working(state) {
					let test_var = this.some_var;
					if (state == 'test') {
						const frame = document.createElement('div');
						frame.innerHTML = '<input style="background-color: #00FF00;" type="submit" value="Working" />';
						frame.onclick = function(event) {
							console.log('You pressed: ' + test_var);
						};
						this.obj.appendChild(frame);
					}
				}
			}

			window.onload = function() {
				let testdiv = new test();
				document.body.appendChild(testdiv.obj);
			}
		</script>
	</head>
	<body>

	</body>
</html>