Sum associative array key values and group it by key
<p>I have table as follows :</p>



<pre><code>&lt;table&gt;
   &lt;thead&gt;
      &lt;th&gt;PRODUCT&lt;/th&gt;
      &lt;th&gt;QUANTITY&lt;/th&gt;
      &lt;th&gt;AREA&lt;/th&gt;
      &lt;th&gt;PRICE&lt;/th&gt;
      &lt;th&gt;TOTAL&lt;/th&gt;
   &lt;tr&gt;
      &lt;td id="name"&gt;SWEETS&lt;/td&gt;
      &lt;td id="qty"&gt;10&lt;/td&gt;
      &lt;td id="area"&gt;250&lt;/td&gt;
      &lt;td id="price"&gt;16.50&lt;/td&gt;
      &lt;td id="total"&gt;160.50&lt;/td&gt;
   &lt;/tr&gt;
   &lt;tr&gt;
      &lt;td id="name""&gt;DRY FOODS&lt;/td&gt;
      &lt;td id="qty"&gt;5&lt;/td&gt;
      &lt;td id="area"&gt;100&lt;/td&gt;
      &lt;td id="price"&gt;10.25&lt;/td&gt;
      &lt;td id="total"&gt;51.25&lt;/td&gt;
   &lt;/tr&gt;
   &lt;tr&gt;
      &lt;td id="name"&gt;FRESH&lt;/td&gt;
      &lt;td id="qty"&gt;20&lt;/td&gt;
      &lt;td id="area"&gt;250&lt;/td&gt;
      &lt;td id="price"&gt;5&lt;/td&gt;
      &lt;td id="total"&gt;100&lt;/td&gt;
   &lt;/tr&gt;
   &lt;tr&gt;
      &lt;td id="name"&gt;MEAT&lt;/td&gt;
      &lt;td id="qty"&gt;10&lt;/td&gt;
      &lt;td id="area"&gt;250&lt;/td&gt;
      &lt;td id="price"&gt;15&lt;/td&gt;
      &lt;td id="total"&gt;150&lt;/td&gt;
   &lt;/tr&gt;
   &lt;tr&gt;
      &lt;td id="name"&gt;FROZEN&lt;/td&gt;
      &lt;td id="qty"&gt;20&lt;/td&gt;
      &lt;td id="area"&gt;300&lt;/td&gt;
      &lt;td id="price"&gt;10&lt;/td&gt;
      &lt;td id="total"&gt;200&lt;/td&gt;
   &lt;/tr&gt;
&lt;/table&gt;
</code></pre>

<p>So, I want to make an array like <code>{area:total}</code> then grouping array values based on area and sum area values.</p>

<p>Like :<br>
<strong>AREA 250</strong> : 410.5<br>
<strong>AREA 100</strong> : 51.25<br>
<strong>AREA 300</strong> : 200  </p>

<p>I tried as follow which I got it array but I don't know how can I grouping the areas ( I used setInterval function because employees can remove or change the area values)</p>



<pre><code>            setInterval(function() {
            var $row = $(this).closest("tr");
            var sasData = [];
            $row.each(function(i) {
                var sasValue = parseFloat($row.find("#area").val());
                var totValue = parseFloat($row.find("#total").val());
                sasData.push({sas:sasValue, tot:totValue});
                console.log(sasData);
            });

            function compressedArray(original) {
                var compressed = [];
            };
        }, 1500)
</code></pre>

<p>Could you please show me the way how can we handle this issue?</p>
