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="input-group">
    <span class="input-group-addon">Search:</span>
    <input type="text" class="form-control" id="myText"/>
    <a class="btn btn-success input-group-addon" id="myButton">DO IT!</a>
   </span>
  <!-- text output container --> 
  <div style="padding:1em">
   <span id="output">Type something and click</span>
  </div>
</div>

JavaScript

//select evertything that has a class btn and attach click to it
$('#myButton').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
  	'I see "'+$('#myText').val() + '" above there.'
  );
});