JSFiddle - React, Tailwind, and code Playground

HTML

<table width="100%" height="700" border=0>
  <tr>
    <td width=550 valign=top>

      <form name="Form1" onsubmit="return false;" action="">
        Name:
        <br>
        <input type="text" name="Name" id="name" placeholder="Name">
        <br> Number:
        <br>
        <input type="text" name="Number" id="number" placeholder="Number">
        <br> Question:
        <br>
        <input type="text" name="Question1" id="questionOne" placeholder="Answer">
        <br> Question:
        <br>
        <select type="drop" name="Question2" id="questionTwo">
          <option value="Select Yes or No">...</option>
          <option value="Yes">Yes</option>
          <option value="No">No</option>
        </select>
        <br> Enter some text?
        <br>
        <textarea type="textarea" name="Sometext" id="someText" placeholder="Type 
something" cols="70" rows="3"></textarea>
        <br> Question:
        <br>

        <select type="drop" name="Question3" id="questionThree">
          <option value="Select Yes or No">...</option>
          <option value="Yes">Yes</option>
          <option value="No">No</option>
        </select>


        <br> Question:
        <br>

        <select type="drop" name="Question4" id="questionFour">
          <option value="Select Yes or No">...</option>
          <option value="Yes">Yes</option>
          <option value="No">No</option>
        </select>
        <br> Enter more text:
        <br>
        <textarea type="textarea" name="Story" id="story" placeholder="Type me a 
story" cols="70" rows="10"></textarea>
        <br>

    </td>
    <td valign="top">

      <table border=0 height=100%>
        <tr>
          <td valign="top" height=410>

            <textarea type="textarea" name="output" onclick="this.focus();this.select()" id="output" cols="70" rows="25" placeholder="Name:
Number:
Answer:
Answer:&#x0a;
Some text:&#x0a;
Answer:&#x0a;
Answer:&#x0a
A little story:"></textarea>
            <br>

          </td>
       ...

JavaScript

function wordwrap(str, width, brk, cut) {
    brk = brk || '\n';
    width = width || 60;
    cut = cut || false;

    if (!str)
      return str;

    var regex = '.{1,' + width + '}(\\s|$)' + (cut ? '|.{' + width + '}|.+$' :
      '|\\S+?(\\s|$)');
    return str.match(RegExp(regex, 'g')).join(brk);
  }



function convert() {
  var name = document.getElementById("name").value;
  var number = document.getElementById("number").value;
  var questionOne = document.getElementById("questionOne").value;
  var questionTwo = document.getElementById("questionTwo").value;
  var someText = document.getElementById("someText").value;
  var questionThree = document.getElementById("questionThree").value;
  var questionFour = document.getElementById("questionFour").value;
  var story = document.getElementById("story").value;


  var output = "";
  output += "Name: " + name + "\n";
  output += "Number: " + number + "\n";
  output += "Answer: " + questionOne + "\n";
  output += "Answer: " + questionTwo + "\n\n";
  output += "Some text: " + someText + "\n\n";
  output += "Answer: " + questionThree + "\n\n";
  output += "Answer: " + questionFour + "\n\n";
  output += "A little story: " + story + "";


  document.getElementById("output").value = output;
}


  function NoteStart() {
    var input = document.getElementById("output").value;
    input = input.replace(/\r/g, '').replace(/\n\n+/g, '\n');
    input = wordwrap(input, 60, '\n', true);

    var data = input.replace(/[ \n\t\r]+$/g, '').split(/\n+/);

    var StartNS = "";

    for (var i = 0; i < data.length; i++) {
      if (i % 10 == 0) {
        if (i > 0)
          output += "\n";

        output += "Three\nLines\nDown\n";
      }

      output += data[i] + "\n";
    }

    output += (data.length % 10 > 0) ? "\n\n" : "\n";

    document.getElementById("secondOutput").value = output;
  }