Here is the code you are looking for, let me know for any clarification;
------------------------------------------------------------------------------
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<style>
.c{
font-family:'Times New Roman';
font-size:18px;
text-align:justify;
color: black;
margin-left:144px;
margin-right:96px;
margin-bottom:96px;
}
.ct {
font-family: "Times new roman";
font-size: 16px;
text-align: center;
color: black;
margin-left: 144px;
margin-right: 96px;
}
</style>
<script>
var counter = 1;
$(document).ready(function () {
$("#button1").click(function () {
$("#button1").hide();
$("#mainContent").hide();
$("#dd1").hide();
$("#add").hide();
print();
$("#button1").show();
$("#mainContent").show();
$("#dd1").show();
$("#add").show();
});
$("#add").click(function () {
var elem=$("#dd1").val();
var str=" ";
var str2=" ";
if(elem=="heading")
{
str="<span>Heading</span><input type='text' onkeyup='func1(this.id);' class='' id='t_"+elem+counter+"'></input>";
str2 = "<h1 id='h_" + elem + counter + "'class='ct'></h1>";
}
else if(elem=="paragraph")
{
str = "<span>Paragraph</span><input type='text' onkeyup='func2(this.id);' class='' id='t_" + elem + counter + "'></input> ";
str2 = "<p id='p_" + elem + counter + "' class='c'></p>";
}
$("#mainContent").append(str);
$("#printArea").append(str2);
++counter;
});
});
function func1(id)
{
var value = $("#"+id).val();
var id2 = id.split("_")[1];
$("#h_"+id2).text(value);
}
function func2(id)
{
var value = $("#" + id).val();
var id2 = id.split("_")[1];
$("#p_" + id2).text(value);
}
</script>
<select id="dd1">
<option>-----Select-----</option>
<option value="heading">Heading</option>
<option value="paragraph">Paragraph</option>
</select>
<button id="add" onclick="">Add</button>
<button id="button1">PRINT</button>
<div id="mainContent"></div>
<div id="printArea"></div>