title: Iterating through array using jquery returns only last object
body: <p>I am new to jquery and i think this is just a basic problem.    `</p>
  
  <pre><code>&lt;input type="text" name="text1" value=""&gt;&lt;/input&gt;
  &lt;input type="text" name="text2" value=""&gt;&lt;/input&gt;
  &lt;input type="text" name="text3" value=""&gt;&lt;/input&gt;
  &lt;input type="text" name="text4" value=""&gt;&lt;/input&gt;
  &lt;input type="text" name="text5" value=""&gt;&lt;/input&gt;       
  &lt;input type="submit" value="submit"&gt;&lt;/input&gt;
  &lt;pre id="result"&gt;
  &lt;/pre&gt;
  &lt;/form&gt;`  
  </code></pre>
  
  <p>This is my html form and i am using following jquery function to produce json object  </p>
  
  <pre><code>$.fn.serializeObject = function()
  {
  var o = {};
  var d={};
  var a = this.serializeArray();
  $.each(a, function(i,n) {
  o['name'] = n['name'];
  o['content'] =(n['value']);
  });
  return o; 
  };    
  </code></pre>
  
  <p><code>$(function() {
       $('form').submit(function() {
       $('#result').text(JSON.stringify($('form').serializeObject()));
       return false;
       });<br>
  });</code>    </p>
  
  <p>on runnig the above html i am getting the output  <code>{"name":"text5","content":"sdsd"}</code>  </p>
  
  <p>just the final text field. i know am wrong somewhere . can someone help me to fix it. thanks in advance</p>