JQuery: Reference appended object thru appended object
<p>I have a button that append a text input field.</p>

<pre><code>&lt;button id="addD"&gt;Add D&lt;/button&gt;
</code></pre>

<p>Clicking this button will append a textfield and a <code>&lt;h3&gt;</code> tag.</p>

<pre><code>    &lt;script&gt;
    var dNum=1;
    function addW(){
        $('#tableW').append('&lt;tr&gt;&lt;td&gt;&lt;h3 id="wd'+dNum+'"&gt;&lt;/h3&gt;&lt;/tr&gt;');
    }
    $('#addD').click(function(){
        $('#divD').append('&lt;input type="text" class="dName" id="d'+dNum+'"&gt;');
        addW();
        dNum++;
    });
    &lt;/script&gt;
</code></pre>

<p>Now I want a change on the appended textfield to reflect on the appended <code>&lt;h3&gt;</code> tag.
I tried doing this:</p>

<pre><code>    $(document).on('change', '.dName', function(){ //when input field change
        var h3ID = 'w'+$(this).attr('id');
        var h3Tag = document.getElementById(h3ID);
        h3Tag.firstChild.nodeValue = document.getElementById($(this).attr('id')).value;
    });
</code></pre>

<p>The referenced text does not get changed. Is there anyway that I can reference the specific <code>&lt;h3&gt;</code> tag with the corresponding id? I think the problem lies on the tag being appended and since no action is required to act on it, the .on() seems irrelevant.</p>


