jQuery selector does not work properly
<p>I am using jQuery selector to hide and unhide some dynamically generated HTML cells. However, it seems like I did not choose the right selector. So, I appreciate if you could give me some suggestions.</p>

<p>The webpage:</p>

<ol>
<li>first ask users to select the number of applications</li>
<li>based on users selection, generate two input fields "Application timing", and "Application Date" for each application.</li>
<li>There are two options in the "Application timing". If the user chooses "Default", the "Application Date" will disappear.</li>
</ol>

<p>Problem:
When there are more than three applications, only the last "Application Date" will disappear, not matter where the selection is made. I think it is because I did not use the right selector.</p>

<p><a href="http://jsfiddle.net/godhong/JDFcn/6/" rel="nofollow">DEMO</a></p>

<p>HTML CODE</p>

<pre><code>&lt;table class="table"&gt;
    &lt;tr&gt;
        &lt;th&gt;
            &lt;label for="id_NOA"&gt;Number of applications:&lt;/label&gt;
        &lt;/th&gt;
        &lt;td&gt;
            &lt;select id="id_NOA" class="valid" name="NOA"&gt;
                &lt;option selected="selected" value=""&gt;Choose&lt;/option&gt;
                &lt;option value="1"&gt;1&lt;/option&gt;
                &lt;option value="2"&gt;2&lt;/option&gt;
                &lt;option value="3"&gt;3&lt;/option&gt;
                &lt;option value="4"&gt;4&lt;/option&gt;
            &lt;/select&gt;
        &lt;/td&gt;
    &lt;/tr&gt;
&lt;/table&gt;
</code></pre>

<p>JavaScript</p>

<pre><code>$(document).ready(function() {
    $('#id_NOA').change(function() {

        var total = $(this).val();
        $('.app_timing').remove();
        $('.app_dates').remove();

        for (var i = 1; i &lt;= total; i++) {

            $('&lt;tr class="app_timing"&gt;&lt;th&gt;&lt;label for="id_Apt' + i + '"&gt;Application timing ' + i + ':&lt;/label&gt;&lt;/th&gt;&lt;td&gt;&lt;select name="Apt' + i + '" id="id_Apt' + i + '"&gt;&lt;option value="" selected="selected"&gt;Select an application timing&lt;/option&gt;&lt;option value="1"&gt;Default&lt;/option&gt;&lt;option value="2"&gt;Enter your own&lt;/option&gt;&lt;/select&gt;&lt;/td&gt;&lt;/tr&gt;').appendTo('.table')

            $('&lt;tr class="app_dates"&gt;&lt;th&gt;&lt;label for="id_Date_apt"&gt;Application Date ' + i + ':&lt;/label&gt;&lt;/th&gt;&lt;td&gt;&lt;input readonly="readonly" type="text" name="Date_apt' + i + '" value="MM/DD" id="id_Date_apt' + i + '"/&gt;&lt;td&gt;&lt;/tr&gt;').appendTo('.table')

            $('.app_timing:last').find('select').bind('change', function() {
                if ($(this).val() == '1') {
                    $('.app_dates:last').hide()
                //$('#id_Date_apt' + i).hide() //I tried to use ID selector, but it does not work 
                }

            })
        }
    })


})​
</code></pre>
