Question

I have a div on which i can type text using span and textarea(which is hidden). I am calling this div onclick function. What i want is on each click i should see a div or span. i.e. multiple divs on the same page.
CODE:

<div class="EaDetail EaDetailText" style="left: 299px; top: 80px; font-size: 17px; width: 126px; height: 23px; position: absolute; display: block;">
<div class="EaDetailInset">
<span style="font-size: 17px;">
<br>
</span>
<textarea></textarea>
</div>
</div>
<input type="button" onclick="addTextBox()" value="Add">

Javascript Code:

function addTextBox()
{
$('.EaDetailInset').show();
}

CSS:

.EaDetail, .EaDetailDisabled {
border: 1px dashed transparent;
font-size: 12px;
overflow: visible;
position: absolute;
display:none;
}
.EaDetail {
border-radius: 3px 3px 3px 3px;

}

.EaDetailInset {
display: none;
max-height: 65px;
padding-bottom:5px;
border: 2px dashed #AAAAAA;
bottom: 0;
left: 0;
overflow: hidden;
position: absolute;
right: 0;
top: 0;
}


.EaDetailText textarea, .EaDetailText span {
font: 100%/1.1 arial,sans-serif;
position: absolute;
white-space: pre;
}
.EaDetailText textarea, .EaDetailText textarea[disabled] {
background: none repeat scroll 0 center transparent;
border: 0 none;
bottom: 6px;
box-shadow: none;
color: #000000;
display: block;
height: 200%;
left: 6px;
line-height: 1.1;
outline: 0 none;
padding: 0;
resize: none;
right: 6px;
top: 6px;
transition: none 0s ease 0s;
width: 200%;
}

Answer 1

<div class="EaDetail EaDetailText" style="left: 299px; top: 80px; font-size: 17px; width: 126px; height: 23px; position: absolute; display: block;">
<div class="EaDetailInset">
</div>
</div>
<input type="button" onclick="addTextBox()" value="Add">

function addTextBox()
{
var newTextBoxdiv = $(document.createElement('div')).attr("class",'EaDetailInset');

    newTextBoxdiv.html('<span style="font-size: 17px;"><br></span><textarea></textarea></span>');

    newTextBoxdiv.insertAfter(".EaDetailInset");
  $(".EaDetailInset").show();
}

see if this works