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" placeholder="Enter item"/>
    <a class="btn btn-success input-group-addon" id="myButton">DO IT!</a>
   </span>
  <!-- text output container --> 
  <div style="padding:1em">
   <ul id="output">
     <!-- nothing here, but will be added in JavaScript -->
   </ul>
  </div>
</div>

CSS

#output {
  list-style:none;
  margin-left:0;
  padding-left:0;
}
#output li span {
  display:block;
  padding-left:2em;
  color:#888;
  margin-bottom:1.0em;
}

JavaScript

//select evertything that has a class btn and attach click to it
$('#myButton').click(function() {
  //here, `this` points to control that was clicked
  var text = $("#myText").val();
  //create a <li> for inside <ul>
  var newLiElement = $("<li> Searched: "+text+"</li>");
  //append it to ul, as if you typed it inside by hand
  $('#output').append(newLiElement);
  
  // normally you would call server here with e.g. 
  // $.post("/search",{question:text}, function(res) { ... then code below...
  // ..but instead we emulate server response with this string:
  var serverResult = "server call not implemented " 
  												+ " @ " + new Date().toLocaleTimeString();
  newLiElement.append($("<span>"+serverResult+"</span>"));
  
  //}) <-- end the call-back function and close bracket here if calling server
});