strange issue with the jquery .find() method

I have a strange problem with the .find() method.

I have the following html:

<table id="roleTab" style="padding: 5px; position: relative; top: 10px">
<thead>
    ....
</thead>
<tbody>
<TMPL_LOOP DATA_ROLES>
    <tr id="<TMPL_VAR ID>">
        <td><select id="role2" name="role2_<TMPL_VAR ID>" title="The role of the employee"><TMPL_VAR ROLE></select></td>
        <td><input id="steps" type="text" name="steps_<TMPL_VAR ID>" size="5" title="Total amount of steps per month" value="<TMPL_VAR STEP>"></td>
        <td><input id="measurable_steps" type="text" name="measurable_steps_<TMPL_VAR ID>" title="Measurable steps" value="<TMPL_VAR MEASURABLE_STEP>"></td>
        <td><input id="steps_ratio" type="text" name="steps_ratio_<TMPL_VAR ID>" title="'Measurable steps' / 'Steps'" value="<TMPL_VAR STEPS_RATIO>%" readonly></td>
        <td style="text-align: center"><select id="reopen_rate" name="reopen_rate_<TMPL_VAR ID>" title="How many reopenes after closing the SI"><TMPL_VAR REOPEN></select></td>
        <td><select id="w4p" name="w4p_<TMPL_VAR ID>"><TMPL_VAR W4P></select></td>
        <td><select id="team" name="team2_<TMPL_VAR ID>"><TMPL_VAR TEAM></select></td>
        <td><input id="checkbox" type=checkbox></td>
        <td><input id="status2" type="hidden" name="status2_<TMPL_VAR ID>" value="<TMPL_VAR STATUS>"></td>
    </tr>
</TMPL_LOOP>
</tbody>
</table>

I have the following scr开发者_开发问答ipt:

$(function(){
    $('#steps').live("focusout", function() {
        var steps = $(this).parents().parents().find('#steps').attr("value");
        var meas_steps = $(this).parents().parents().find('#measurable_steps').attr("value");
        var value = (meas_steps/steps)*100;
        value = parseInt(value);
        if(steps && meas_steps){
            var t = $(this).parents().parents().attr("id");////////////////////
            alert(t);////////////////////////////////////////////////////////////
            $(this).parents().parents().find('#steps_ratio').attr("value", value+"%");
        }
    });
});

I have two rows on the page (following the loop). first has id '2' and the second has id '3'.

The problem is when I change the steps field in the second row (can be first row as well) and focusout then the alert shows '3' but the value in 'steps_ratio' field changed for BOTH of the rows...

Why doesn't it changed only for the 'steps_ratio' that under id '3'?

Thanks

$(this).parents().parents()

should be

$(this).parent().parent()

.parents() returns all parent elements all the way up the tree, .parent() returns only the immediate parent.

Also, you shouldn't have multiple elements in the page with the same ID.