How to get to a child of a parent when multiple exist?
<p>There is problem with the following code. I am trying to Increase the dollar amount for all the numbers independently (by 0.01 per click). But it only seems to work on the first "content" class, not on the other 2. Each of these are identical besides the amount.</p>

<p>Layout:</p>

<pre><code>&lt;div class="content"&gt;
    &lt;div class="item"&gt;&lt;span class="number"&gt;$10.11&lt;/span&gt;&lt;a href="#" class="incNumber"&gt; Increase&lt;/a&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;div class="content"&gt;
   &lt;div class="item"&gt;&lt;span class="number"&gt;$5.04&lt;/span&gt;&lt;a href="#" class="incNumber"&gt; Increase&lt;/a&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;div class="content"&gt;
    &lt;div class="item"&gt;&lt;span class="number"&gt;$3.45&lt;/span&gt;&lt;a href="#" class="incNumber"&gt; Increase&lt;/a&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>Script:</p>

<pre><code>$(function () {
   $(".incNumber").click(function() {
      brother = $(this).closest('div').children('.number');
      amount = $(brother).html().replace(/[^\d\.]/g, "");
      amount = parseFloat(amount);

      $(brother).html('$'+String(amount.toFixed(2)));
      return false;
   });
});
</code></pre>

<p>This script seems to function fine. converting it to a float and then back seems to increase it by 0.01 however this is not intentional...</p>
