JQuery append new div to its parent

Question

I have following div tag with child tags.

<div class="span6">
    <div class="control-group">
        <label class="control-label" for="inputEmail">Item Name</label>
        <div class="controls">
            <input type="text" id="inputEmail" class="input-xlarge" placeholder="Enter item name here...">
        </div>
    </div>
</div>

And I wanna append child <div class="control-group"></div> to parent <div class="span6"></div> according to the array. So I have written the javascript is as below.

$.each(categories, function (k, elem) {
    var options = '';
    var options = '
    <div class="control-group">
        <label for="StockCategory">Category</label>
        <div class="controls">
            <select class="input-xlarge get-category">
    ';
    options +='<option value="">Select Category</option>';
    $.each(data, function(key, value) {
        options += '<option value="' + key + '">' + value + '</option>';
    });
    options +='
            </select>
        </div>
    </div>';
    $("div.span6").append(options);
}

So I wanted to append these child divs according to array but Its not happening. So I needed the following result.

<div class="span6">
    <div class="control-group">
        <label class="control-label" for="inputEmail">Item Name</label>
        <div class="controls">
            <input type="text" id="inputEmail" class="input-xlarge" placeholder="Enter item name here...">
        </div>
    </div>
    <div class="control-group">
        <label class="control-label" for="inputEmail">Item Name</label>
        <div class="controls">
            <input type="text" id="inputEmail" class="input-xlarge" placeholder="Enter item name here...">
        </div>
    </div>
    <div class="control-group">
        <label class="control-label" for="inputEmail">Item Name</label>
        <div class="controls">
            <input type="text" id="inputEmail" class="input-xlarge" placeholder="Enter item name here...">
        </div>
    </div>
    <div class="control-group">
        <label class="control-label" for="inputEmail">Item Name</label>
        <div class="controls">
            <input type="text" id="inputEmail" class="input-xlarge" placeholder="Enter item name here...">
        </div>
    </div>
    <div class="control-group">
        <label class="control-label" for="inputEmail">Item Name</label>
        <div class="controls">
            <input type="text" id="inputEmail" class="input-xlarge" placeholder="Enter item name here...">
        </div>
    </div>
</div>

Please help me to get it. The work is more appreciated.

Answer 1

Below jquery will do the needful.

<script type="text/javascript">
$(document).ready(function(){

    var data = { val1 : 'text1', val2 : 'text2', val3 : 'text3' };
    var options = '';
    $.each(data, function(key, value) {

/*  options = '<div class="control-group"><label for="StockCategory">Category</label><div class="controls"><select class="input-xlarge get-category">';
    options += '<option value="">Select Category</option>';
    options += '<option value="' + key + '">' + value + '</option>';
    options +='</select></div></div>';
*/  


    options = '<div class="control-group"><label class="control-label" for="' + key + '">' + key + '</label><div class="controls">';
    options +='<input type="text" id="' + key + '" class="input-xlarge" placeholder="' + value + '">';
    options +='</div></div>';



    $("div.span6").append(options);

    });
});
</script>