JSFiddle - React, Tailwind, and code Playground

by Karl Mernagh

HTML

<div class="center_column" id="center_column">								
			<!--Put in the Plus Sign, Equation and text instruction to allow the user to add a new Div to write the solution and directions-->
			<div id="answer_steps" class="answer_steps">
				
				<!--Div contains each answer step-->
				<div id = "answer_step" class = "answer_step">
					<!--This placeholder text is styled from CSS and will empty the div once the user starts typing-->
					<div id="answer_step_equation0" class="answer_step_equation" contenteditable="true" placeholder="Enter The Next Solution Step This Question"></div>
					<div id="answer_step_description0" class = "answer_step_description" contenteditable="true" placeholder="Enter A Description as to how this step was reached or how to solve the next step"></div>
				</div>
				
			</div>
			
			<!-- Buttons to dynamically add and remove answer divs. The remove functionality is added in JQuery for the add button-->
			<button id="add_answer_step_button" class="add_answer_step_button">+ Add next Step</button>
		</div>

CSS

#answer_steps { 
	display:block;
	margin-top: 40px;
	width: 100%;
	height: 150px;
}

.answer_step_equation{
	float: left;
	border: 1px solid black;
	background-color: #F0F4F5;
	width: 60%;
	height: 150px;
	margin-top:20px;
	margin-bottom: 5px;
	text-align: center;
	overflow: hidden;	
	overflow-y: auto;  
}

.answer_step_description {
	
	float: right;
	border: 1px solid black;
	background-color: #F0F4F5;
	width: 38%;
	height: 150px;
	margin-top:20px;
	margin-bottom: 5px;
	text-align: justify;
	overflow: hidden;	
	overflow-y: auto;
}

[contenteditable=true]:empty:not(:focus):before{
  content: attr(placeholder);
  color: #96ADB5;
  text-align: justify;
  font-size: 14pt;
  font-style: italic;
  display: block;
}

button.add_answer_step_button {
	float: right;
	margin-left: 300px;
	margin-bottom:30px;
	font-size:12pt;
	font-weight: bold;
	border-radius: 5px;
	background-color: #eee;
  color: #444;
  border: solid 1px gray;	
}

button.remove_answer_step_button {
	display: block;
	margin-top: 10px;
	font-size:12pt;
	font-weight: bold;
	border-radius: 5px;
	background-color: #eee;
  color: #444;
  border: solid 1px gray;	
}


button.add_answer_step_button:active, button.add_answer_step_button:hover, button.remove_answer_step_button:active, button.remove_answer_step_button:hover {
	background-color: #CDEDF7;	
	border: 1px solid blue;		
	cursor: pointer; 			
}

JavaScript

$("button.add_answer_step_button").click(function () {
			$new_step = $("div.answer_steps").append($('<div id="answer_step class = "answer_step">').append($('<div id="answer_step_equation' + answer_identifier_number + '" class="answer_step_equation" contenteditable="true" placeholder="Enter The Next Solution Step This Question">')).append($('<div id="answer_step_description' + answer_identifier_number + '" class = "answer_step_description" contenteditable="true" placeholder="Enter A Description as to how this step was reached or how to solve the next step">')).append($('<button id="remove_answer_step_button" class = "remove_answer_step_button">- Remove This Step</button>')));
      
			answer_identifier_number++;
		});
	
		$("#remove_answer_step_button").live('click',function () {
			$(this).parent().remove();
		});