title: Onsubmit the div values show those values in json code format
body: <p>i am new to json so i am trying to create json code on submit of the div values.
  so here i have buttons called text section and image section</p>
  <pre><code>&lt;div class=&quot;control-group&quot;&gt;
      &lt;button type=&quot;submit&quot; name=&quot;text_section&quot; id=&quot;text_section&quot; value=&quot;Text Section&quot; class=&quot;btn-info&quot; onclick=&quot;toggler('show_textSection');&quot; &gt;Text Section&lt;/button&gt;
      &lt;button type=&quot;submit&quot; name=&quot;image_section&quot; id=&quot;image_section&quot; value=&quot;Image Section&quot; class=&quot;btn-info&quot; onclick=&quot;toggler('show_imageSection');&quot;&gt;Image Section&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  <p>So when i click on text section button i am showing below divs</p>
  <pre><code>&lt;div class=&quot;control-group&quot;&gt;
      &lt;label for=&quot;tasktitel&quot; class=&quot;control-label&quot;&gt;Font Size &lt;sup class=&quot;validfield&quot;&gt;&lt;span style=&quot;color:#F00;font-size:20px;&quot;&gt;*&lt;/span&gt;&lt;/sup&gt; &lt;/label&gt;
      &lt;div class=&quot;controls&quot;&gt;
          &lt;select id=&quot;font_size&quot; name=&quot;font_size&quot; class=&quot;select2-me input-xlarge&quot; data-rule-required=&quot;true&quot;&gt;
              &lt;option value=&quot;&quot;&gt;Select FontSize&lt;/option&gt;
              &lt;option value=&quot;9&quot;&gt;9&lt;/option&gt;
              &lt;option value=&quot;10&quot;&gt;10&lt;/option&gt;
              &lt;option value=&quot;11&quot;&gt;11&lt;/option&gt;
              &lt;option value=&quot;12&quot;&gt;12&lt;/option&gt;
              &lt;option value=&quot;13&quot;&gt;13&lt;/option&gt;
              &lt;option value=&quot;14&quot;&gt;14&lt;/option&gt;
              &lt;option value=&quot;15&quot;&gt;15&lt;/option&gt;
              &lt;option value=&quot;16&quot;&gt;16&lt;/option&gt;
              &lt;option value=&quot;17&quot;&gt;17&lt;/option&gt;
              &lt;option value=&quot;18&quot;&gt;18&lt;/option&gt;
              &lt;option value=&quot;19&quot;&gt;19&lt;/option&gt;
              &lt;option value=&quot;20&quot;&gt;20&lt;/option&gt;
              &lt;option value=&quot;21&quot;&gt;21&lt;/option&gt;
              &lt;option value=&quot;22&quot;&gt;22&lt;/option&gt;
              &lt;option value=&quot;23&quot;&gt;23&lt;/option&gt;
          &lt;/select&gt;
      &lt;/div&gt;
  &lt;/div&gt;  &lt;!-- Font Size--&gt;
  &lt;div class=&quot;control-group&quot;&gt;
      &lt;label for=&quot;tasktitel&quot; class=&quot;control-label&quot;&gt;Font Weight&lt;sup class=&quot;validfield&quot;&gt;&lt;span style=&quot;color:#F00;font-size:20px;&quot;&gt;*&lt;/span&gt;&lt;/sup&gt; &lt;/label&gt;
      &lt;div class=&quot;controls&quot;&gt;
          &lt;select id=&quot;font_weight&quot; name=&quot;font_weight&quot; class=&quot;select2-me input-xlarge&quot; data-rule-required=&quot;true&quot;&gt;
              &lt;option value=&quot;&quot;&gt;Select FontWeight&lt;/option&gt;
              &lt;option value=&quot;100&quot;&gt;100&lt;/option&gt;
              &lt;option value=&quot;200&quot;&gt;200&lt;/option&gt;
              &lt;option value=&quot;300&quot;&gt;300&lt;/option&gt;
              &lt;option value=&quot;400&quot;&gt;400&lt;/option&gt;
              &lt;option value=&quot;500&quot;&gt;500&lt;/option&gt;
              &lt;option value=&quot;600&quot;&gt;600&lt;/option&gt;
              &lt;option value=&quot;700&quot;&gt;700&lt;/option&gt;
              &lt;option value=&quot;800&quot;&gt;800&lt;/option&gt;
              &lt;option value=&quot;900&quot;&gt;900&lt;/option&gt;
          &lt;/select&gt;
      &lt;/div&gt;
  &lt;/div&gt; &lt;!-- Font Weight--&gt;
  </code></pre>
  <p>So when i choose those values i would like to create json like this</p>
  <pre><code>{
    &quot;template&quot;: {
      &quot;question_section&quot;: {
        &quot;section_data&quot;:[
          {
            &quot;index&quot;: 1,
            &quot;section&quot;: &quot;text section__2&quot;,
            &quot;properties&quot;: {
              &quot;font_size&quot;: &quot;(respective value)&quot;,
              &quot;font_weight&quot;: &quot;(respective value)&quot;,
              &quot;font_color&quot;: &quot;(respective value)&quot;,
              &quot;row&quot;: &quot;(respective value)&quot;
            }
          },
            
        ],
        &quot;html_data&quot;:&quot;&lt;HTML_CODE&gt;&quot;
      },
  
    }
  }
  </code></pre>
  <p>can anyone help me how can i manage this..thank in advance</p>