JSFiddle - React, Tailwind, and code Playground
HTML
<div id="rightcontainer"></div>
<input type="button" id="files" value="Files"/>
<div id="leftcontainer">
</div>
CSS
*div{border:thin solid #F00;}
/*questionbank css*/
#questionbank-content textarea{width:auto;vertical-align:middle !important;}
#questionbank-content #question{vertical-align:middle !important;}
/*questionbank css ends*/
/*blog css*/
.time{float:right; text-transform:none; text-height:auto; font-size:10px;padding:3px;border:thin solid #666;margin:5px;}
#blog .maintitle{
border:3px solid #999;
background-color:#CCC;
color:#666666;
text-transform:capitalize;
padding:5px;
margin-bottom:10px;
}
/*blog css ends*/
#uploadprogress{
display:none;
}
#badagephoto{
margin:10px;
}
#badage{
display:table-cell;
vertical-align:middle;
}
#badagephoto,#badageuname{
display:inline-block;
vertical-align:middle;
}
.mediumphoto{width:64px;height:64px;}
/*.mediumphoto, #badageuname{border:thin solid #F00;}*/
.validity{
*border:thin solid #F00;
width:100px;
}
.page{
*border:thin solid #F00;
}
hr{background-color:#333333;color:#333333;border:thin solid #999;width:95%;margin:5px;}
.menu, .accountmenu {
*border:thin solid #666;
color:#666;
cursor:pointer;
margin-top:1px;
margin-bottom:1px;
*padding:1px 1px 1px 10px;/*padding:1px 1px 1px 3px;*/
*padding:auto 10px auto 10px
font-family:'Lucida Grande', Tahoma, Verdana, Arial, sans-serif;
font-size:13px;
}
.menu{padding:1px 5px 1px 5px;}
.menuprogress{
background-image:url(img/progresssgu.gif);
background-position:right;
background-repeat:no-repeat;
}
.accountmenu{padding:4px 1px 4px 10px;}
.menuhover {
background-color:#CCC; /*original CCC*/
}
.menuactive {
background-color:#B6B6B6;/*A6A6A6*/
color:#333333;
font-weight:500;
}
#leftcontainer {
float:left;
display:inline-block;
width:65%;
height:auto;
*border:thin solid #00F;
}
#rightcontainer {
float:right;
width:34%;
height:800px;/*change to auto later*/
*border:thin solid #F00;
}
.title,.action{
border:thin solid #999;
...
JavaScript
$("#files").live('click',function(){
var button = '<label class="uiButton uiButtonConfirm"><input value="Add Answer" type="button" /></label>';
var mydata ='<div id="questionbank-content" class="page">';
mydata += '<div class="title">Question Bank</div>';
mydata += '<div class="content"><div class="row"><div class="label" style="">QUES</div><div class="data"><textarea class="textarea" rows="3" cols="40"></textarea></div></div></div>';
//answer
mydata += '<div class="content"><div class="row"><div class="label"><input type="radio" class="answer" name="answer"></input></div><div class="data"><textarea id="answer1" rows="3" cols="30"></textarea><span id="add" style="cursor:pointer;display:inline-block;margin-left:10px;">'+button+'</span></div></div></div>';
var i = 2;
$('#add').live('click',function(){
var j = i++;
$(this).parent('div').parent('div').parent('div').after('<div class="content"><div class="row"><div class="label"><input type="radio" class="answer" name="answer"></input></div><div class="data"><textarea id="answer'+ j +'" rows="3" cols="30">'+ j +'</textarea><span id="add" style="cursor:pointer;display:inline-block;margin-left:10px;">'+button+'</span></div></div></div>');
$(this).remove();
});
mydata +='<div class="action"><label class="uiButton uiButtonConfirm"><input value="Submit" type="button" id="update" /></label></div>';
mydata += '</div>';//finishing questionbank-content class
$("#leftcontainer").html(mydata);
});
$('textarea').live('click',function(){
$('#rightcontainer').append($(this).attr('id'));
});