jQuery Texbox Keypress callback event
<p>I have written a jQuery function that when I enter some text in a textbox it populates a div with the input from the textbox. This works fine, however when the function is set on mulitple textboxes it starts to do funny things when I clear the textbox it seems to clear the second div contents if it exists. Can anybody help? </p>

<p>Code is below</p>

<p>Javascript</p>

<pre><code>var doneTypingInterval = 500;  //time in ms, 1 second for example 
var screenTypingTimer;         //timer identifier


jQuery.fn.populateTxtIntoImageTxt = function (callback, divId) {
    this.each(function () {
        $(this).keyup(function () {
            var textVal = $(this).val();
            clearTimeout(screenTypingTimer);
            if ($(this).val) {
                screenTypingTimer = setTimeout(function () { callback(divId, textVal); }, doneTypingInterval);
            } 
        })
    })
}

function setTextToImageScreenLabel(id,txt) {
    jQuery('#'+id).text(txt);
}


$(document).ready(function () {
    //Populates the image
    $('#txt_' + '1').populateTxtIntoImageTxt(setTextToImageScreenLabel,'HeadingTxt');
    $('#txt_' + '7').populateTxtIntoImageTxt(setTextToImageScreenLabel,'StudyNameTxt');
});
</code></pre>

<p>HTML</p>

<pre><code>&lt;div&gt;
    &lt;div&gt;
        &lt;label for="txt_1"&gt;Welcome Text&lt;/label&gt;
    &lt;/div&gt;
    &lt;div&gt;
        &lt;input id="txt_1" maxlength="50" name="txt_1" type="text" value="E-Diarys1" /&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;div&gt;
    &lt;div&gt;
        &lt;label for="txt_7"&gt;Name of Study&lt;/label&gt;
    &lt;/div&gt;
    &lt;div&gt;
        &lt;input id="txt_7" maxlength="50" name="txt_7" type="text" value="Study Name1" /&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;div id="WelcomeScreen"&gt;
    &lt;div id="HeadingTxt"&gt;&lt;/div&gt;   
    &lt;div id="StudyNameTxt"&gt;&lt;/div&gt;   
    &lt;div id="StudyNumberTxt"&gt;&lt;/div&gt;   
    &lt;div id="SubjectIDTxt"&gt;&lt;/div&gt;   
&lt;/div&gt;
</code></pre>
