Question

I have three Tabs “B1”, “B2”, and “B3”. I want to clone this HTML and load it as the content of three tabs with ids id = "bv-B1-p1", id = "bv-B2-p1", and id = "bv-B3-p1" (i.e. replacing -brand- with B1 , B2 or B3 in accordance with the tab selected).

<div id="bv-brand-priority">    
<div>
<ul>
<li><a href="#bv-brand-hp"><span>Static Tab</span></a></li>

<li><a id="addTab" href="#" ><span>+</span></a></li>
</ul>
<div id="bv-brand-hp">
    </div>
    <div id="bv-brand-p">
           <div id="bv-brand-eng-media-image-p-img">

            </div>    
        <!--clicking this link should append another similar div to the  above div with incremented id i.e id="bv-brand-eng-media-image-p-img1"-->           

        <a href="#" id='bv-brand-eng-add-media-image-p'>Add New Image</a>

    </div>
</div>   

</div>

Answer 1

You can use the following code to create divs using jQuery:

CODE:

<div id="test"></div>

var brand = 3;
$(document).ready(function() {
    for (var i = 1; i <= brand; i++) {
        $('#test').append('<div id="bv-B' + i + '-P1" class="touch" onclick="checkid(this);">TESTING</ div>');
    }
});

function checkid(c) {
    var id = c.id;
    alert(id);
}

For example look into the following fiddle:

http://jsfiddle.net/QshmC/1/

Once you click on the divs it will display the id of clicked div.