I want to add some html elements dynamically according to a count that i read in page load event. The html code is like
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<h3 class=" title-main">Personal Information</h3>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Add</button>
</div>
<div class="text-fields">
<span class="left-text"><strong style="color: #F00">*</strong>First Name</span> <span>
<input name="" type="text" class="text-box" id="fname" /></span>
</div>
<div class="text-fields">
<span class="left-text"><strong style="color: #F00">*</strong>Last Name</span> <span>
<input name="" type="text" class="text-box" /></span>
</div>
<div class="text-fields">
<span class="left-text"><strong style="color: #F00">*</strong>Email ID</span> <span>
<input name="" type="text" class="text-box" /></span>
</div>
<div class="text-fields">
<span class="left-text"><strong style="color: #F00">*</strong>Confirm Email ID</span> <span>
<input name="" type="text" class="text-box" /></span>
</div>
<div class="text-fields">
<span class="left-text"><strong style="color: #F00">*</strong>Mobile Number</span> <span>
<input name="" type="text" class="text-box" /></span>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" id="btnsave" data-dismiss="modal">Apply</button>
</div>
</div>
</div>
i want this code to be inserted within a for or foreach loop like
foreach(var i in collection)
{
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<h3 class=" title-main">Personal Information</h3>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Add</button>
</div>
<div class="text-fields">
<span class="left-text"><strong style="color: #F00">*</strong>First Name</span> <span>
<input name="" type="text" class="text-box" id="fname" /></span>
</div>
<div class="text-fields">
<span class="left-text"><strong style="color: #F00">*</strong>Last Name</span> <span>
<input name="" type="text" class="text-box" /></span>
</div>
<div class="text-fields">
<span class="left-text"><strong style="color: #F00">*</strong>Email ID</span> <span>
<input name="" type="text" class="text-box" /></span>
</div>
<div class="text-fields">
<span class="left-text"><strong style="color: #F00">*</strong>Confirm Email ID</span> <span>
<input name="" type="text" class="text-box" /></span>
</div>
<div class="text-fields">
<span class="left-text"><strong style="color: #F00">*</strong>Mobile Number</span> <span>
<input name="" type="text" class="text-box" /></span>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" id="btnsave" data-dismiss="modal">Apply</button>
</div>
</div>
</div>
}
please help