Jquery select a sub set of text boxes
<p>I am using asp.net to render a page consisting of numerous sets of text boxes.</p>

<p>The number of groups depends on the customer, so it is not in my control.</p>

<p>what I want is so that when teh values in the entry boxes in a group are changed, then the result box for that group changes to sum the total of the group, and also change the back colour.</p>

<p>I have got this working for a prototype of one set, as per below.</p>

<pre><code>function calculateSetColour(i) {
        var total = 0;

        $(".answer").each(function () {
            if (!isNaN(this.value) &amp;&amp; this.value.length != 0) {
                total += parseFloat(this.value);           
            }
        });


        $(".result").val(total);
        $(".answer").addClass(calculateColour(total));
    }
</code></pre>

<p>But I cant seem to get it to work for groups. I assume that I need to add in say a second selector, so I can then use </p>

<pre><code>$(.answer .group" + i).each ..
</code></pre>

<p>where i is the id added programatically to each group. But putting an alert statement inside the function shows that it is never being hit, so I suspect I have the syntax wrong and the selector is never matching.</p>

<p>So is my approach correct, and what is the right syntax to incorporate a variable into the class selector? (Class selectors are safest as .net can mangle id's and names)</p>

<p>As requested, the html looks like</p>

<pre><code> &lt;div class="reportItem"&gt;
            TOTAL UNITS DELIVERED&lt;BR /&gt;
        &lt;span id="ctl00_ContentPlaceHolder1_rptdG_ctl01_Name"&gt;Site A&lt;/span&gt;
        &lt;div class="l1" &gt;New&lt;/div&gt;&lt;div class="l2"&gt;&lt;input name="ctl00$ContentPlaceHolder1$rptdG$ctl01$tbNew" type="text" id="ctl00_ContentPlaceHolder1_rptdG_ctl01_tbNew" class="answer" onblur="calculateSetColour(1);" /&gt;&lt;/div&gt; &lt;br /&gt;
        &lt;div class="l1" &gt;Used&lt;/div&gt; &lt;div class="l2"&gt;&lt;input name="ctl00$ContentPlaceHolder1$rptdG$ctl01$tbUsed" type="text" id="ctl00_ContentPlaceHolder1_rptdG_ctl01_tbUsed" class="answer"  onblur="calculateSetColour(1);" /&gt;&lt;/div&gt;
        &lt;div class="l1" &gt;Compliance&lt;/div&gt; &lt;div class="l2"&gt;&lt;input name="ctl00$ContentPlaceHolder1$rptdG$ctl01$tbCompliant" type="text" id="ctl00_ContentPlaceHolder1_rptdG_ctl01_tbCompliant" class="result" /&gt;&lt;/div&gt;
            &lt;/div&gt;


                    &lt;div class="reportAltItem"&gt;
                        TOTAL UNITS DELIVERED&lt;BR /&gt;
        &lt;span id="ctl00_ContentPlaceHolder1_rptdG_ctl02_DlrName"&gt;Site 2&lt;/span&gt;
    &lt;div class="l1" &gt;New&lt;/div&gt;&lt;div class="l2"&gt;&lt;input name="ctl00$ContentPlaceHolder1$rptdG$ctl02$tbNew" type="text" id="ctl00_ContentPlaceHolder1_rptdG_ctl02_tbNew" class="answer" onblur="calculateSetColour(2);"/&gt;&lt;/div&gt;
    &lt;div class="l1" &gt;Used&lt;/div&gt;&lt;div class="l2"&gt;&lt;input name="ctl00$ContentPlaceHolder1$rptdG$ctl02$tbUsed" type="text" id="ctl00_ContentPlaceHolder1_rptdG_ctl02_tbUsed" class="answer" onblur="calculateSetColour(2);"/&gt;&lt;/div&gt;
                        &lt;div class="l1" &gt;Compliance&lt;/div&gt; &lt;div class="l2"&gt;&lt;input name="ctl00$ContentPlaceHolder1$rptdG$ctl02$tbCompliant" type="text" id="ctl00_ContentPlaceHolder1_rptdG_ctl02_tbCompliant" class="result" /&gt;&lt;/div&gt;
            &lt;/div&gt;
</code></pre>
