JSFiddle - React, Tailwind, and code Playground

by rvaldez

HTML

<div id="questionOne">
				<div class="test21 headStyle">
					<p>Some question1?<span>Answer</span></p>
				</div>
				<div class="bordDotGrey">
					<p>Here goes the options for question one.</p>
					
					<button class="buttonOneA">Answer A</button>
					<button class="buttonOneB">Answer B</button>
				</div>
			</div>

CSS

.dispNone{display:none;}
	.headStyle{width:auto; background-color:rgb(238,238,238);padding:20px;cursor:pointer;color:#2a83b9;font-size:18px;border:1px solid #CFCFCF; margin-bottom:2px;}
	.bordDotGrey{border:1px dotted grey; font-size:14px; font-family:arial; color:#777; margin-left:10px;}
	.dispBlock{display:block;}

JavaScript

var ans1OptionA=$('<div><div class="test21 headStyle"><p>Some question(2) related to Answer A of question 1?<span></span></p></div><div class="bordDotGrey"><p>Bingo! Answer two</p><button id="buttonTwoA">Answer 1A</button><button id="buttonTwoB">Answer 1B</button></div></div>');
var ans1OptionB=$('<div><div class="test21 headStyle"><p>Some question(2) related to Answer B of question 1?<span></span></p></div><div class="bordDotGrey"><p>Bingo! Answer two</p><button id="buttonTwoA">Answer 1A</button><button id="buttonTwoB">Answer 1B</button></div></div>');
var ans2OptionA=$('<div><div class="test21 headStyle"><p>Some question(3) related to Answer A of question 2?<span></span></p></div><div class="bordDotGrey"><p>Bingo! Answer three</p><button id="buttonA">Answer A</button><button class="buttonB">Answer B</button></div></div>');
var ans2OptionB=$('<div><div class="test21 headStyle"><p>Some question(3) related to Answer B of question 2?<span></span></p></div><div class="bordDotGrey"><p>Bingo! Answer three</p><button class="buttonA">Answer A</button><button class="buttonB">Answer B</button></div></div>');
$(".buttonOneA").click(function(){
$(".bordDotGrey").slideUp("slow");
$('#questionOne').append(ans1OptionA);
});

$(".buttonOneB").click(function(){
$(".bordDotGrey").slideUp("slow");
$('#questionOne').append(ans1OptionB);

});


	$("body")
		.on("click", "#buttonTwoA", function(){
		$(".bordDotGrey").slideUp("slow");
		$("#questionOne").append(ans2OptionA);
		
		});
	$("body")
		.on("click", "#buttonTwoB", function(){
		$(".bordDotGrey").slideUp("slow");
		$("#questionOne").append(ans2OptionB);

		});