JSFiddle - React, Tailwind, and code Playground

by Exceeder

HTML

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="&quot;https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div style="padding:1em;">
  <!-- buttons -->
   <span class="centre">
    <a class="btn btn-success" id="myButton1">One Button</a>
    <a class="btn btn-default" id="myButtonO">Another Button</a>
    <a class="btn btn-info" id="myButtonY">Yet Another Button</a>
    <a class="btn btn-info" id="ElenaButton">Elena's Button</a>
   </span>
  <!-- text output container --> 
  <div style="padding:1em">
   <span id="output">Click a button to see output</span>
  </div>
</div>

CSS

.btn2 {
  color: cyan;
  background: none;
  border: white;
}

JavaScript

//select evertything that has a class btn and attach click to it
$('.btn').click(function() {
  //here, `this` points to control that was clicked
	$('#output').text(
    //text takes a string as a parameter, below it wraps `this` into jQuery $ to 
    //have access to attributes, to id in particular
  	$(this).attr('id') + " was clicked"
  );
});