JSFiddle - React, Tailwind, and code Playground
HTML
<div class="bilet" id="bilet_1">
<div class="number"><p>Вопрос № <span>1</span></p></div>
<div class="vopros" contenteditable="true" id="vopros_1">
<div class="placehold">
Ваш вопрос
</div>
</div>
<div class="otvet" id="otvet_1" contenteditable="true">
<div class="placehold">
Ответ
</div>
</div>
<div id="new-otvet_1"></div>
<div class="newotvet" id="newotvet_1" onClick="otvet()">
<div class="placehold-otvet" >
Добавить новый вариант ответа
</div>
</div>
</div>
<div class="new-bilet" id="new-bilet"></div>
<div class="new-vopros" onClick="vopros()">
<div class="placehold-new-vopros">
Добавить ещё вопрос
</div>
</div>
CSS
.bilet{
background:#DDD7D7;
margin-left:40px;
margin-right:40px;
border-radius:15px;
font-family: OpenSans-Regular;
height:100%;
margin-bottom:50px;
overflow:hidden;
width:1000px;
}
.bilet p{
font-size:18px;
font-family: OpenSans-Bold;
margin-left:30px;
}
.bilet span{
font-size:18px;
font-family: OpenSans-Bold;
}
.number{
padding-top:25px;
padding-bottom:25px;
}
.vopros{
width:90%;
margin-left:30px;
min-height:110px;
border: none; /* Убираем рамку */
outline: none; /* Убираем свечение в Chrome и Safari */
-webkit-appearance: none; /* Убираем рамку в Chrome и Safari */
font-size:18px;
padding:13px 15px;
border-radius:10px;
font-family: OpenSans-Regular;
background:#fff;
margin-bottom:25px;
overflow:auto;
}
.placehold{
color:#b7b7b7;
font-family: OpenSans-Regular;
}
.otvet{
min-height:26px;
background:#fff;
margin:30px;
width:380px;
border: none; /* Убираем рамку */
outline: none; /* Убираем свечение в Chrome и Safari */
-webkit-appearance: none; /* Убираем рамку в Chrome и Safari */
font-size:18px;
padding:13px 15px;
border-radius:10px;
float:left;
}
.newotvet{
height:50px;
width:410px;
font-size:18px;
border-radius:10px;
border:1px #a1a1a0 dotted;
vertical-align:top;
float:left;
margin:30px;
cursor:pointer;
}
.placehold-otvet{
width:300px;
margin:11px auto;
color:#343434;
font-size:18px;
font-family: OpenSans-Regular;
}
.new-vopros{
height:130px;
width:500px;
margin:0 auto;
border-radius:10px;
border:1px #a1a1a0 dotted;
cursor:pointer;
margin-bottom:80px;
}
.placehold-new-vopros{
font-size:30px;
font-family: OpenSans-Regular;
margin:41px 85px;
}
JavaScript
<script type="text/jscript">
var num = 2;
function otvet() {
var newdiv = document.createElement("div");
newdiv.innerHTML = "<div contenteditable='true' class='otvet' id='otvet_"+ num++ +"'>\n<div class='placehold'>Ответ</div></div>";
//newdiv.appendTo('div#quest');
document.getElementById("new-otvet_1").appendChild(newdiv);
return false;
}
var bl = 2;
var n = 2;
var vop = 2;
var otf = 2;
function vopros() {
var newdiv = document.createElement("div");
newdiv.innerHTML = "<div class='bilet' id='bilet_"+ bl++ +"'>\n<div class='number'>\n<p>Вопрос № <span>"+ n++ +"</span>\n</p>\n</div>\n<div class='vopros' contenteditable='true' id='vopros_"+ vop++ +"'>\n<div class='placehold'>Ваш вопрос</div>\n</div>\n<div class='otvet' id='otvet_1' contenteditable='true'>\n<div class='placehold'>Ответ</div>\n</div>\n<div id='new-otvet_"+ otf++ +"'></div>\n<div class='newotvet' onClick='otvet_2()'>\n<div class='placehold-otvet'>Добавить новый вариант ответа</div>\n</div>\n</div>";
//newdiv.appendTo('div#quest');
document.getElementById("new-bilet").appendChild(newdiv);
return false;
}
var dva = 2;
var otv = 2;
function otvet_2() {
var newdiv = document.createElement("div");
newdiv.innerHTML = "<div contenteditable='true' class='otvet' id='otvet_"+ dva++ +"'>\n<div class='placehold'>Ответ</div></div>";
//newdiv.appendTo('div#quest');
$otvet = "new-otvet_"+ otv++ +"";
document.getElementById($otvet).appendChild(newdiv);
return false;
}
</script>