JSFiddle - React, Tailwind, and code Playground

by John Moran

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">

<div class ="chooseContainer">
  <div class="questionDiv">
    <label id="replace">Ask your question here:</label>
    <br>
    <textarea id="questionInput"></textarea>
    <br>
    <br>
    <button id="save">Save</button>
    <button id="refresh" style="display:none">Amend question</button>
  </div>
  <br>
  <table class="options">
    <tr>
      <td><label class="labopt">Option 1</label></td>
    </tr>
    <tr>
      <td><textarea class="opt" id="option1"></textarea></td>
      <td><button type="button" class="plus btn btn-default"> <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> </button>
        <button type="button" class="minus btn btn-default"> <span class="glyphicon glyphicon-minus" aria-hidden="true"></span> </button></td>
    </tr>
  </table>
  <div class="resultContainer"> <br>
    <button id="doThis">Decide</button>
    <br>
    <br>
    <p style="font-weight:bold">You should: <span id="verdict"></span></p>
  </div>
</div>

JavaScript

$(document).ready(function() {
    //Write question
    //Save question, replace over input
    $("#save").on("click", function() {
        //get value of question
        var question = $("#questionInput").val();
        //replace over label
        $("#replace").text(question);
        //hide input
        $("#questionInput").hide();
        //hide save button
        $("#save").hide();
        //show refresh button
        $("#refresh").show();
        //on click of refresh re-enable input field and save button
    });
    //Onclick of refresh button enable amend question
    $("#refresh").on("click", function() {
        $("#replace").text("Ask your question here:");
        $("#questionInput").show();
        $("#save").show();
        $("#refresh").hide();
    });
    //Decide on number of answers
    $(function() {
        var counter = 1;
        $('.plus').on("click", function(event) {
            event.preventDefault();
            counter++;
            var firstRow = $('<tr><td><label class="labopt">Option' +' '+counter+'</label></td></tr>' +
			'<tr><td><textarea class="opt" id="option1"></textarea></td>' +
      '<td><button type="button" class="plus btn btn-default"> <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> </button>'+
        '<button type="button" class="minus btn btn-default"> <span class="glyphicon glyphicon-minus" aria-hidden="true"></span> </button></td>'+
    '</tr>');
	
            $('table.options').append(firstRow);
        });
    }); 
        //delete an answer option
		$('.minus').click(function(event) {
			event.preventDefault();
			$(this).destroy(firstRow);
		});
		
		
		
		
		//On click, get values of answers & choose random answer
        $("#doThis").bind("click", function() {
            var optionone = $("#option1").val();
            var optiontwo = $("#option2").val();
            var optionthree = $("#option3").val();
            var optionfour = $("#option4").val();
            var optionfive =...