Generating 2 dom elements in javascript
<p>How do I debug problems like this. I have this code:</p>

<pre><code>var index = 0;
$('#gen_field').click(function() {

    var next_row = $('&lt;tr&gt;').attr({
        'id': 'tbl_row' + index
    }).appendTo('#tbody_coll');

    var td1 = $('&lt;td&gt;').attr({
        'id': 'td_collector' + index
    }).appendTo(next_row);
    var td2 = $('&lt;td&gt;').attr({
        'id': 'td_rem' + index
    }).appendTo(next_row);

    var collector = $('&lt;input&gt;').attr({
        'type': 'text',
        'name': 'collector[]'
    }).appendTo(td1).css('width', '200px');

    var rem_btn = $("&lt;input&gt;").attr({
        'type': 'button',
        'id': index,
        'name': 'rem',
        'class': 'rem',
        'value': 'del'
    }).appendTo(td2).addClass('span-2');

    console.log(index);
    index++;
});
</code></pre>

<p>This is supposed to generate only 1 field at a time. But its generating 2 of the same fields at once. Console.log is also showing 2 zeroes, then 2 ones when I click on the button that generates the fields. But I couldn't get any further into debugging this problem using firebug. Can you tell me what's wrong with my code?</p>
