JSFiddle - React, Tailwind, and code Playground

by Robert McLendon

HTML

<p>Would you like to leave specific gift in your will?</p>
<p>
  <button onclick="q1AnswerYes()">Yes</button>
  <button onclick="q1AnswerNo()">No</button>
</p>
<br />
<!-- If answer to Q1 is Yes show this block -->
<div id="q1AnswerYesBlock" style="display:none; text-align:center;
margin:auto;">

  <div>What specific gifts would you like to leave?</div>
  <hr>
  <div>
    <button onclick="q2AnswerCash('q2AnswerCashDisp')">Cash</button>
    <button>Car</button>
    <button>Real Estate</button>
    <button>Jewelry</button>
    <button>Other</button>
  </div>
  <div id="q2AnswerCashDisp">
    <!-- Recipient forms get added here -->
  </div>
  <div style="text-align:center;
margin:auto; display:inline">


    <button id="addCashRecipient" style="display:none" onclick="addCashRecipientForm('q2AnswerCashDisp')">Add another recipient</button>
  </div>
</div>


<!-- If answer to Q1 is No show this block -->
<div id="q1AnswerNoBlock" style="display:none">
  <p>Some other crap</p>
</div>


<!--
<span id="amountPrompt" style="display:none">Amount in $:  </span>
<span id="recipientPrompt" style="display:none">Name of Recipient:  </span> -->





<div id="testFormHTML" style="display:none">
  <form id="testFormId" method="get" action="https://legality.asp" style="border-syle:none">
    <fieldset id="fieldsetid" style="border-style:none">

      <div class="formPrompt">
        Amount:
      </div>
      <input type="text">
      <div class="formPrompt">
        Recipient:
      </div>
      <input onblur="submit()" type="text" name="recipient">
      <input style="display:none" class="testFormParamInputId" name="testFormParam" value="">
      <br>
      <br>
    </fieldset>

  </form>

</div>



<span id="amountPrompt" style="display:none"><div>Amount in $: </div></span>
<span id="recipientPrompt" style="display:none"><div>Name of Recipient: </div></span>
<div id="cashGiftEOF" style="display:none">
  <br>
  <br>
  <hr>
</div>

CSS

body {
  background-color: white;
  font-size: 18px;
  font-family: 'Lato', sans-serif;
  color: black;
  text-align: center;
}

input {
  border: 5px solid white;
  -webkit-box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.1), 0 0 16px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.1), 0 0 16px rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.1), 0 0 16px rgba(0, 0, 0, 0.1);
  padding: 15px;
  background: rgba(255, 255, 255, 0.5);
  margin: 0 0 10px 0;
}

button {
  background-color: white;
  border: 2px solid #00CED1;
  border-radius: 12px;
  color: #00CED1;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  outline: none;
}

JavaScript

var cashRecipientNum = 1;


function q1AnswerYes() {
  document.getElementById("q1AnswerYesBlock").style.display = "block";
  document.getElementById("q1AnswerNoBlock").style.display = "none";
}


function q1AnswerNo() {
  document.getElementById("q1AnswerYesBlock").style.display = "none";
  document.getElementById("q1AnswerNoBlock").style.display = "block";
}


function q2AnswerCash(blockId) {
  if (cashRecipientNum == 1) {
    addForm(blockId, "testForm", cashRecipientNum++);
    document.getElementById("addCashRecipient").style = "display:inline";
  };
}


function addCashRecipientForm(blockId) {
  addForm(blockId, "testForm", cashRecipientNum++);
}

// Function to add a new form with unique action argument to the document.
function addForm(blockId, formArg, numInstance) {
  var formHTML = formArg + "HTML";
  var formId = formArg + "Id";
  var formParamInputId = formArg + "ParamInputId";
  var newFormId = formArg + "Id" + numInstance;


  var div = document.getElementById(formId),
    clone = div.cloneNode(true); // true means clone all childNodes and all eventhandlers
  clone.id = newFormId;
  //clone.style = "display:block";
  clone.style = "border-style:none";
  document.getElementById(blockId).appendChild(clone);
  var x = document.getElementById(newFormId).getElementsByClassName(formParamInputId);
  x[0].value = numInstance;

  console.log(x[0].class);
  console.log("here");
}


// Ajax to submit an edited post to the database.   
function sendNotes() {

  console.log("send notes");
  submit();
  // we want to store the values from the form input box, then send via ajax below
  //var $form = $(this);        
  //$.ajax({
  //        type: "POST",
  //        url: "includes/addNotes.php",
  //        data: $form.serialize(),
  //       success: function(){ 
  //
  //          }
  //  }); // End .ajax function
  //  return false;
} //End submit function()