JSFiddle - React, Tailwind, and code Playground

by itsjustcarlos

HTML

<link rel="stylesheet" href="www.quirksmode.org/quirksmode.css">
<script src="www.quirksmode.org/quirksmode.js"></script>

<body>


<div id="readroot" style="display: none !important"><p>
	<input class="button button3" type="button" value="Remove Option" onclick="this.parentNode.parentNode.removeChild(this.parentNode);"><br><br>

<label>	Option Type</label><br>
  <select name = option_type[] id = option_type><option value = VIP>VIP
   </option>
 
  <option value = All>All </option>
 <option value = Boost>Boost </option>

 <option value = Sales>Sales </option>

 </select><br>
<label>	Option Subtype</label><br>
  <select name = option_subtype[] id = option_subtype><option value = Time Item>Time Item </option>
 <option value = All>All </option>
 <option value = Upkeep>Upkeep </option>
 <option value = Titles>Titles </option>
 <option value = Missing Item (Google)>Missing Item (Google) </option>
 <option value = Missing Prizes (Research)>Missing Prizes (Research) </option>

 </select><br>	
<label>Option Suggestion</label>
<textarea cols = '100' name = 'option_suggestion[]'  placeholder = "Suggested Response" ></textarea>
	
	
	
</div>
<div>
<form method="post" action="add_option.php">
<label> Question Type</label><br>
  <select name = question_type id = question_type><option value = All>All </option>
 <option value = VIP  >VIP   </option>
 <option value = Sales>Sales </option>
 <option value = Challenges>Challenges </option>
 <option value = Account>Account </option>

 </select><br>
<label> Question Subtype</label><br>
  <select name = question_subtype id = question_subtype><option value = > </option>
 <option value = Time Item>Time Item </option>
 <option value = Missing Item (Google)>Missing Item (Google) </option>

 </select><br>

<textarea cols = '100' name = 'question'  placeholder="Enter Question here" ></textarea>

<span id="writeroot"></span>

<br>

	<input class="button button1" type="button" id="moreFields" value="New Option"><br>
	<input type="submit"...

CSS

.button {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 4px 8px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    cursor: pointer;
}

.button1 {
    background-color: white;
    color: black;
    border: 2px solid #4CAF50;
}

.button1:hover {
    background-color: #4CAF50;
    color: white;
}

.button2 {
    background-color: white;
    color: black;
    border: 2px solid #008CBA;
}

.button2:hover {
    background-color: #008CBA;
    color: white;
}

.button3 {
    background-color: white;
    color: black;
    border: 2px solid #f44336;
}

.button3:hover {
    background-color: #f44336;
    color: white;
}

.button4 {
    background-color: white;
    color: black;
    border: 2px solid #e7e7e7;
}

.button4:hover {background-color: #e7e7e7;}

.button5 {
    background-color: white;
    color: black;
    border: 2px solid #555555;
}

.button5:hover {
    background-color: #555555;
    color: white;
}

JavaScript

<!--

var counter = 0;

function init() {
	document.getElementById('moreFields').onclick = moreFields;
	moreFields();
}

function moreFields() {
	counter++;
	var newFields = document.getElementById('readroot').cloneNode(true);
	newFields.id = '';
	newFields.style.display = 'block';
	var newField = newFields.childNodes;
	for (var i=0;i<newField.length;i++) {
		var theName = newField[i].name
		if (theName)
			newField[i].name = theName + counter;
	}
	var insertHere = document.getElementById('writeroot');
	insertHere.parentNode.insertBefore(newFields,insertHere);
	//document.getElementById("moreFields").focus();
}

// -->