title: Dynamic nested JSON object
body: <p>I have dynamic divs on a page which would have anassigned class from a bunch of values. For example:</p>
  
  <pre><code>&lt;div class='class1'&gt;&lt;span class='spn1'&gt;test&lt;/span&gt;&lt;/div&gt;
  &lt;div class='class2'&gt;&lt;span class='spn2'&gt;test another&lt;/span&gt;&lt;/div&gt;
  &lt;div class='class2'&gt;&lt;span class='spn3'&gt;test1&lt;/span&gt;&lt;/div&gt;
  &lt;div class='class3'&gt;&lt;span class='spn4'&gt;test123&lt;/span&gt;&lt;/div&gt;
  &lt;div class='class1'&gt;&lt;span class='spn221'&gt;test&lt;/span&gt;&lt;/div&gt;
  </code></pre>
  
  <p>The class could have any random number appended to it.</p>
  
  <p>Now in my javascript, I am trying to build a dynamic JSON object based on the class of the div and the structure I want is:</p>
  
  <pre><code>{
      class1: {
          spn1: 'test',
          spn221: 'test'
      },
      class2: {
          spn2: 'test another',
          spn3: 'test123'
      },
      class3: {
          spn4: 'test223'
      }
  }
  </code></pre>
  
  <p>I am able to achieve this in a flat array structure but I want it in the JSON format as I will execute an ajax call based in the classes of div in other function. The flat array I am getting is as(which I don't want)</p>
  
  <pre><code>[{class:class1,span:spn1,text:test},{class:class1,span:spn221,text:test},...]
  </code></pre>
  
  <p><strong>Link to fiddle:</strong> <a href="https://jsfiddle.net/8v0uove3/" rel="nofollow">https://jsfiddle.net/8v0uove3/</a></p>