JSFiddle - React, Tailwind, and code Playground

by Twisty

HTML

<section class="row">
  <form id="question-form" action="/" method="GET">
    <div>
      <input id="question" /> <button type="submit">Submit</button>
    </div>
  </form>
</section>

<div id="answer"></div>

<template id="result">
  <section>
    <div class="alert">
      <p class="someText"></p>
    </div>
  </section>
</template>

JavaScript

$(function() {
  function showResults(results) {
    console.log("Show Results", results);
    var clone = $($('#result').html());
    console.log("Clone Cresated", clone.prop("outerHTML"));
    $('.alert', clone).addClass(results.class);
    $('.someText', clone).text(results.answer);
    clone.appendTo("#answer");
  }

  $('#question-form').submit(function(event) {
    event.preventDefault();
    console.log("Form Submit Prevented");
    console.log("Sending Question", $("#question").val());
    $.ajax({
      data: {
        json: JSON.stringify({
          q: $("#question").val(),
          class: "answer",
          answer: "This is the answer."
        })
      },
      type: 'POST',
      url: '/echo/json',
      success: showResults
    });
  });
});