Duplicating Div always duplicates
<p><strong>TO BETTER UNDERSTAND MY QUESTION AND SEE CODE VISIT THE FIDDLE: <a href="http://jsfiddle.net/dnyXC/" rel="nofollow">http://jsfiddle.net/dnyXC/</a></strong></p>

<p>I have a script (below) that allows you to click a icon and it duplicates the table allowing for more inputs on the included form. This issue is, once you click the icon once to duplicate it, anywhere you click on the table regardless of position duplicates the table again. </p>

<pre><code>document.getElementById('line-duplicate').onclick = duplicate;
    var i = 0;

        function duplicate() {
            var original = document.getElementById('item-table' + i);
            var clone = original.cloneNode(true); // "deep" clone
            clone.id = "item-table" + ++i; // there can only be one element with an ID
            clone.onclick = duplicate; // event handlers are not cloned
            original.parentNode.appendChild(clone);
        }
</code></pre>

<p>Here is the html for the table: </p>

<pre><code>&lt;table class="table" id="item-table0"&gt;
&lt;tr&gt;
    &lt;td&gt;Item Name&lt;/td&gt;
    &lt;td&gt;Qty/Hrs&lt;/td&gt;
    &lt;td&gt;Rate&lt;/td&gt;
    &lt;td&gt;Tax Rate&lt;/td&gt;
    &lt;td&gt;Type&lt;/td&gt;
    &lt;td&gt;Cost&lt;/td&gt;
    &lt;td&gt;Actions&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
    &lt;td&gt;
        &lt;input class="input-medium" type="text" name="" /&gt;
    &lt;/td&gt;
    &lt;td&gt;
        &lt;input class="input-mini" type="text" name="" placeholder="1" /&gt;
    &lt;/td&gt;
    &lt;td&gt;
        &lt;input class="input-mini" type="text" name="" placeholder="0.00" /&gt;
    &lt;/td&gt;
    &lt;td&gt;&lt;/td&gt;
    &lt;td&gt;
        &lt;select class="input-small" name=""&gt;
            &lt;option&gt;Standard&lt;/option&gt;
            &lt;option&gt;Expense&lt;/option&gt;
        &lt;/select&gt;
    &lt;/td&gt;
    &lt;td&gt;$0.00&lt;/td&gt;
    &lt;td&gt;&lt;i class="icon-plus" style="cursor:pointer;" id="line-duplicate"&gt;&lt;/i&gt;  &lt;i class="icon-trash pull-right"&gt;&lt;/i&gt;
        &lt;/a&gt;
    &lt;/td&gt;
&lt;/tr&gt;
</code></pre>

<p></p>

<p>endless duplication is fine, the issue is when you go to type another item into the form, you duplicate the table. I need it so that the only way to duplicate the table is by clicking the plus icon. </p>

<p><strong>TO BETTER UNDERSTAND MY QUESTION AND SEE CODE VISIT THE FIDDLE: <a href="http://jsfiddle.net/dnyXC/" rel="nofollow">http://jsfiddle.net/dnyXC/</a></strong></p>
