Jquery, calculate html table rows with same class?
<p>I am building an invoice with grails, and for dynamical calculation I am using jquery.</p>

<p>I don't know, may be its not a good solution and I am not that fit in javascript. May be someone could help me, here we go:</p>

<pre><code>&lt;thead&gt;
    &lt;tr&gt;
        &lt;g:sortableColumn style="width: 20px" property="id" title="${message(code: 'packet.id.label', default: 'Id')}" /&gt;
        &lt;g:sortableColumn style="width: 10px" property="anzahl" title="${message(code: 'packet.anzahl.label', default: 'Anzahl')}" /&gt;
        &lt;th&gt;&lt;g:message style="width: 250px" code="packet.artikel.label" default="   Artikel    " /&gt;&lt;/th&gt;
        &lt;th&gt;&lt;g:message code="packet.artikel.label" default="   Steuer in %   " /&gt;&lt;/th&gt;
        &lt;th&gt;&lt;g:message code="packet.artikel.label" default="   Preis pro Stück in €  " /&gt;&lt;/th&gt;
        &lt;th&gt;&lt;g:message code="packet.artikel.label" default="   Preis Gesammt in € " /&gt;&lt;/th&gt;
    &lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
    &lt;g:each in="${packetInstanceList}" status="i" var="packetInstance"&gt;
        &lt;tr class="${(i % 2) == 0 ? 'odd' : 'even'}"&gt;
            &lt;td&gt;&lt;g:link controller="packet" action="show"  id="${packetInstance.id}"&gt;${fieldValue(bean: packetInstance, field: "id")}&lt;/g:link&gt;&lt;/td&gt;
            &lt;td&gt;&lt;input name="q" class="st" type="text" style="background-color:transparent;border:0px solid white;" value="${fieldValue(bean: packetInstance, field: "anzahl")}" onclick="if (this.value=='Search') {this.value = '';}" readonly="true"/&gt;
            &lt;!--  ${fieldValue(bean: packetInstance, field: "anzahl")}    --&gt;
            &lt;/td&gt;
            &lt;td nowrap&gt;${fieldValue(bean: packetInstance, field: "artikel")}&lt;/td&gt;
</code></pre>

<p>that creates a html with many rows with </p>

<pre><code>        &lt;tr class="even"&gt;
            &lt;td&gt;&lt;a href="/test/packet/show/17"&gt;17&lt;/a&gt;&lt;/td&gt;
            &lt;td&gt;&lt;input name="q" class="st" type="text" style="background-color:transparent;border:0px solid white;" value="1,222" onclick="if (this.value=='Search') {this.value = '';}" readonly="true"/&gt;
                &lt;!--  1,222    --&gt;
            &lt;/td&gt;
            &lt;td nowrap&gt; Blueray,Arthouse &lt;/td&gt;
            &lt;td&gt; &lt;input type="text" style="background-color:transparent;border:0px solid white;" class="input-steuer" value="19"/&gt; &lt;/td&gt;
            &lt;td&gt; &lt;input type="text" style="background-color:transparent;border:0px solid white;" class="input-value"  /&gt; &lt;/td&gt;
            &lt;td&gt; &lt;input type="text" style="background-color:transparent;border:0px solid white;" class="output-value" readonly /&gt;
            &lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr class="odd"&gt;
            &lt;td&gt;&lt;a href="/test/packet/show/18"&gt;18&lt;/a&gt;&lt;/td&gt;
            &lt;td&gt;&lt;input name="q" class="st" type="text" style="background-color:transparent;border:0px solid white;" value="100" onclick="if (this.value=='Search') {this.value = '';}" readonly="true"/&gt;
                &lt;!--  100    --&gt;
            &lt;/td&gt;
            &lt;td nowrap&gt; Blueray,Arthouse &lt;/td&gt;
            &lt;td&gt; &lt;input type="text" style="background-color:transparent;border:0px solid white;" class="input-steuer" value="19"/&gt; &lt;/td&gt;
            &lt;td&gt; &lt;input type="text" style="background-color:transparent;border:0px solid white;" class="input-value"  /&gt; &lt;/td&gt;
            &lt;td&gt; &lt;input type="text" style="background-color:transparent;border:0px solid white;" class="output-value" readonly /&gt;
            &lt;/td&gt;
        &lt;/tr&gt;
            &lt;td&gt; &lt;input type="text" style="background-color:transparent;border:0px solid white;" class="input-steuer" value="19"/&gt; &lt;/td&gt;
            &lt;td&gt; &lt;input type="text" style="background-color:transparent;border:0px solid white;" class="input-value"  /&gt; &lt;/td&gt;
            &lt;td&gt; &lt;input type="text" style="background-color:transparent;border:0px solid white;" class="output-value" readonly /&gt;
            &lt;/td&gt;
        &lt;/tr&gt;
    &lt;/g:each&gt;
</code></pre>

<p>As you can see these rows have same classes. </p>

<p>Here is jquery code:</p>

<pre><code>$(document).ready(function() {
    $(".input-value").keyup(function() {
        // var output = $(".output-value");
        var test = 0;

        $('.input-value').each(function() {
            var value = parseFloat($(this).val());
            var value3 = parseFloat($(".st").val());
            var value2 = parseFloat($(".input-steuer").val());

            //output.val(((value - value * value2/100)*value3).toFixed(2));
            score = ((value - value * value2/100)*value3);
            score = score.toFixed(2);
            //output.val(score);
            test+=score;
        });

        $(".output-value").val(test);
    });
});
</code></pre>

<p>This calculates only the first row and not each row, 
I´d like to have a output for every row
and sum of the all outputs, but I am not used to javascript...</p>

<p>It feels like it is simple, but not for me.</p>

<p>Thanks for your time  </p>
