Question: I have a list of textboxes with corresponding labels. When the user inputs a number in the textbox, the result is shown in its corresponding label on keyup. I can do this one by one but I would like to loop through the textboxes to show the result in the corresponding label and I'm not sure how to do that. 

This is the code:

```
 <div id="p">
    FOO
    <input type="text" id="nop" />
</div>

 <div id="e_table">
                <table>
                    <thead>
                        <th><h3>ABC</h3></th>
                        <th><h3>PQR</h3></th>
                        <th><h3>XYS</h3></th>
                    </thead>
                    <tbody>
                    <tr>
                        <td>Staff</td>
                        <td><input type="text" id="as" /></td>
                        <td><label id="las">label</label></td>
                    </tr>
                    <tr>
                        <td>Office</td>
                        <td><input type="text" id="bo"/></td>
                        <td><label id="lbo">label</label></td>
                    </tr>
                    <tr>
                        <td>Administrative</td>
                        <td><input type="text" id="mca" /></td>
                        <td><label id="lmca">label</label></td>
                    </tr>
                    </tbody>
                </table>
</div>

```

JQUERY:

```
$(function() {

         $("#as").keyup(function() {
        var nop = $("#nop").val();
        var val = $(this).val();
        var formula = parseInt(val/40/nop);
        $("#las").html(formula);
    });                                                             

});

```

Answer: 
You can attach the `keyup` event to all `input:text` elements within the table rather than on each one individually. The only *smell* is how you select the corresponding `label` element.

```
$(function() {
    $("#e_table").delegate("input:text", "keyup", function() {
        var $input = $(this);
        var value = parseInt($input.val() / 40 / $("#nop").val());
        $input.closest("tr").find("label").html(value)
    });
});

```
I'd suggest the following:

```
// this is just to generate the 'for' attribute so that clicking the label focuses the field
$('td label').each(
    function(){
        $(this).attr('for',this.id.substring(1));
    });

$('input:text').keyup(
    function(){
        var val = $(this).val();
        if (!isNaN(val)){
            $('label[for="' + this.id + '"]')
                .text(val);
        }
    });

```

[JS Fiddle demo](http://jsfiddle.net/davidThomas/7YMKY/1/).

References:

* [`.attr()`](http://api.jquery.com/attr/).
* [`isNaN()`](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/isNaN).
* [`.keyup()`](http://api.jquery.com/keyup/).
* [`:text` input selector](http://api.jquery.com/text-selector/).
* [`.val()`](http://api.jquery.com/val/).