JSFiddle - React, Tailwind, and code Playground

by Vladimir

HTML

<div class="container">

  <div class="content-container">
    <label>First Content<label>
      <textarea id="first-content" class="content-area" placeholder="Insert Content Here"></textarea>
      </div>

      <div class="content-container">
        <label>Second Content<label>
      <textarea id="second-content" class="content-area" placeholder="Insert Content Here"></textarea>
      </div>

      <div class="content-container">
        <label>Third Content<label>
      <textarea id="third-content" class="content-area" placeholder="Insert Content Here"></textarea>
      </div>

      <div class="content-container">
        <label>Fourth Content<label>
      <textarea id="fourth-content" class="content-area" placeholder="Insert Content Here"></textarea>
      </div>


      <button id="c-btn">Submit</button>

      <div id ="c-content"></div> 

</div>

JavaScript

var firstContent = document.getElementById("first-content");
var secondContent = document.getElementById("second-content");
var thirdContent = document.getElementById("third-content");
var fourthContent = document.getElementById("fourth-content");
var customContainer = document.getElementById("c-content");
var submitBtn = document.getElementById("c-btn");


function submitCustomForm() {

  var cElementOne = document.createElement("p");
cElementOne.innerText = firstContent.value;
customContainer.appendChild(cElementOne);

  var cElementTwo = document.createElement("p");
cElementTwo.innerText = secondContent.value;
customContainer.appendChild(cElementTwo);

  var cElementThree = document.createElement("p");
cElementThree.innerText = thirdContent.value;
customContainer.appendChild(cElementThree);

  var cElementFour = document.createElement("p");
cElementFour.innerText = fourthContent.value;
customContainer.appendChild(cElementFour);
}

submitBtn.addEventListener("click", submitCustomForm);