динамично добавяне на елемет

[Pavkatar]

Здравейте

имам 1 страница, която изглежда по този начин:

на единия таб (2рия ако има значение) слагам няколко елемента в 1 див, позиционирани по следния начин:


ето го кода с който го правя:

<div class="functions" id="1">
                    <input type="checkbox" style="float: left;" class="inputCounter" />
                    <select style="width:100px; float: left;" class="options">
                        {foreach from=$infoMethod item=infoMethods key=k}
                        <option value="{$k}">{$infoMethods.text}</option>
                        {/foreach}
                    </select>
                    S:<span class="slider_size">10</span>
                    <div class="slider" style="height: 7px; margin: 5px 10px 0 10px; width: 100px; float: left;"></div>
                        <img style="margin: 0px 0 0 2px; float: right; cursor: pointer;" class="add_line" alt="Добавете още 1 елемент"  src="{$directory}images/icons/plus.png" />
                    </div>

Както забелязвате, някой елементи се генерират автоматично от phpто (в нашия случай от smarty).
Искам при натисканета на бутона "+" да се добавя още 1 ред със същото съдържание, само да му се сменят идтата. И после от всички добавени елементи да вземам съдържанието с js или php няма значение
Ето така изглежда до момента, като ще добавя още елементи

Дано да сте ме разбрали за какво става дума

 

[Pavkatar]

Up и дообясних малко повече за какво стата дума

 

[marian]

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var addId = 1;
$("a#add").click(function(e) {
e.preventDefault();
var el = $("div#1").clone();
el.attr("id",++addId);
$("div#"+(addId-1)).after(el);
});
});
</script>
<div class="functions" id="1">
                    <input type="checkbox" style="float: left;" class="inputCounter" />
                    <select style="width:100px; float: left;" class="options">
                        {foreach from=$infoMethod item=infoMethods key=k}
                        <option value="{$k}">{$infoMethods.text}</option>
                        {/foreach}
                    </select>
                    S:<span class="slider_size">10</span>
                    <div class="slider" style="height: 7px; margin: 5px 10px 0 10px; width: 100px; float: left;"></div>
                        <img style="margin: 0px 0 0 2px; float: right; cursor: pointer;" class="add_line" alt="Добавете още 1 елемент"  src="{$directory}images/icons/plus.png" />
                    </div>
<a href="#" id="add">+</a>