Jquery: how to select next first element using class
<p>I am trying to auto fill city and state value after user typing 5-digit zip code. The Ajax part works perfectly, the problem is I have two sets of zip/city/state fields in one web page. I searched this issue for quite a while, using next(),nextAll() even slice(), none of them work in my situation.</p>

<h3>Web page related part:</h3>

<pre><code>&lt;table&gt;
    &lt;tr&gt;
        &lt;td align="right" class="style3"&gt;ZIP:&lt;/td&gt;
        &lt;td&gt;
            &lt;asp:TextBox ID="tb_ZIP" runat="server" Width="100px"
            alt="zip5" class="zip"&gt;&lt;/asp:TextBox&gt;
        &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td align="right" class="style3"&gt;City: 
            &lt;td&gt;
                &lt;asp:TextBox ID="tb_City" runat="server" Width="100px"
                class="city"&gt;&lt;/asp:TextBox&gt;
            &lt;/td&gt;
            &lt;tr&gt;
                &lt;td align="right" class="style3"&gt;State:&lt;/td&gt;
                &lt;td&gt;
                    &lt;asp:DropDownList ID="ddl_State" runat="server"
                    Width="100px" class="state"&gt;&lt;/asp:DropDownList&gt;
                &lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td align="right" class="style2"&gt;ZIP:&lt;/td&gt;
                &lt;td&gt;
                    &lt;asp:TextBox ID="tb_AffiOrComZIP" runat="server"
                    Width="100px" alt="zip5" class="zip"
                    ontextchanged="tb_AffiOrComZIP_TextChanged"&gt;
                        &lt;tr&gt;
                            &lt;td align="right" class="style2"&gt;City:&lt;/td&gt;
                            &lt;td&gt;
                                &lt;asp:TextBox ID="tb_AffiOrParCity" runat="server"
                                Width="100px" class="city"&gt;&lt;/asp:TextBox&gt;
                            &lt;/td&gt;
                        &lt;/tr&gt;
                        &lt;tr&gt;
                            &lt;td align="right" class="style2"&gt;State:&lt;/td&gt;
                            &lt;td&gt;
                                &lt;asp:DropDownList ID="ddl_AffiOrParComState"
                                runat="server" Width="100px" class="state"&gt;
                                &lt;/asp:DropDownList&gt;
                            &lt;/td&gt;
                        &lt;/tr&gt;
                    &lt;/asp:TextBox&gt;
                &lt;/td&gt;
            &lt;/tr&gt;
        &lt;/td&gt;
    &lt;/tr&gt;
&lt;/table&gt;
</code></pre>

<h3>JS:</h3>

<pre><code>$(".zip").each(function() {
    var zipTextBox = $(this);

    zipTextBox.keyup(function() {
        var zip = $(this).val();
        if (zip.length == 5) {
            $.post(rootPath + "/AjaxPages/DropdownData.aspx", {
                "inputValue": zip,
                "type": "zip"
            }, function(data) {
                var cityStr = $(data).attr("city");
                var stateStr = $(data).attr("state");
                $(this).nextAll(".city:first").val(cityStr); //this doesn't work
                for (var i = 0; i &lt; $(this + ".state option").length; i++) { //this works for first
                    if ($(this + ".state").get(0).options[i].text == stateStr) {
                        $(this + ".state").get(0).options[i].selected = true;
                        break;
                    }
                }
            });
        }
    });
});
</code></pre>

<p>After using Ajax function I get returned value for city and state. For each city textbox I give a "city" class, for each state dropdownlist I give a "state" class. I wonder how can I put those value into right position?  Any help is appreciated. Thank you in advance.</p>
