title: Create multidimensional JSON
body: <p>My code for creating the JSON is:</p>
  
  <pre><code>function buildRequestStringData(form) {
      var select = form.find('select'),
          input = form.find('input'),
          requestString = '{';
      for (var i = 0; i &lt; select.length; i++) {
          requestString += '"' + $(select[i]).attr('name') + '": "' +$(select[i]).val() + '",';
      }
      if (select.length &gt; 0) {
          requestString = requestString.substring(0, requestString.length - 1);
      }
      for (var i = 0; i &lt; input.length; i++) {
          if ($(input[i]).attr('type') !== 'checkbox') {
              requestString += '"' + $(input[i]).attr('name') + '":"' + $(input[i]).val() + '",';
          } else {
              if ($(input[i]).attr('checked')) {
                  requestString += '"' + $(input[i]).attr('name') +'":"' + $(input[i]).val() +'",';
              }
          }
      }
      if (input.length &gt; 0) {
          requestString = requestString.substring(0, requestString.length - 1);
      }
      requestString += '}';
      return requestString;
  }
  
  $('#checkoutButton').click(function () {
      alert(buildRequestStringData($('#orderList')));
  });
  </code></pre>
  
  <p>The output is:</p>
  
  <pre><code>{
  "cardQuantity":"",
  "cardamount":"200",
  "cardquantity":"2500",
  "cardimg":"http:fb44.jpg?3926",
  "gcardID":"GCRDaK15",
  
  "cardQuantity":"",
  "cardamount":"300",
  "cardquantity":"900",
  "cardimg":"http:e4c17.jpg?3926",
  "gcardID":"GCRD7h17"
  </code></pre>
  
  <p>}</p>
  
  <p>And my expected output is:</p>
  
  <pre><code>{
              "data": [
                  {
                      "cardQuantity":"",
                      "cardamount":"200",
                      "cardquantity":"2500",
                      "cardimg":"http:fb44.jpg?3926",
                      "gcardID":"GCRDaK15"
                  },
                  {
                      "cardQuantity":"",
                      "cardamount":"300",
                      "cardquantity":"900",
                      "cardimg":"http:e4c17.jpg?3926",
                      "gcardID":"GCRD7h17"
                  }
              ]
  }
  </code></pre>
  
  <p>Every array is equivalent to one loop (or one button click) from this code:</p>
  
  <pre><code>$("#addCart").click(function(){
  
  var cardamount = $('#cardamount').val();
  var cardquantity = $('#cardquantity').val();
  var cardimg = $('#cardimg').val();
  var cardID = $('#cardID').val();
  var gcardID = $('#gcardID').val();
  if(!cardID){
      alert("Please select a card!");
  }
  else{
      $("#no-data").hide();
  var order = '&lt;div id="orders-data"&gt;'+
                  '&lt;table class="table table-borderless" style="margin: 0;"&gt;'+
                      '&lt;tr&gt;'+
                          '&lt;td width="27%"&gt;'+
                              '&lt;input class="form-control cardQuantity" id="cardQuantity" name="cardQuantity" type="number" placeholder="Qty"/&gt;'+
                          '&lt;/td&gt;'+
                          '&lt;td width="45%"&gt;'+
                              '&lt;div class="card"&gt;'+
                                '&lt;img src="'+cardimg+'" alt="Avatar" style="width:100%"&gt;'+
                              '&lt;/div&gt;'+
                          '&lt;/td&gt;'+
                          '&lt;td width="35%"&gt;'+cardamount+'&lt;/td&gt;'+
                      '&lt;/tr&gt;'+
                      '&lt;tr&gt;'+
                          '&lt;td colspan="3" style="text-align: left;"&gt;'+
                              '&lt;b&gt;Recipient Email:&lt;/b&gt;'+
                              '&lt;p&gt;To: butch123@gmail.com&lt;/p&gt;'+
                              '&lt;b&gt;Purchaser Email:&lt;/b&gt;'+
                              '&lt;p&gt;To: sample@gmail.com&lt;/p&gt;'+
                          '&lt;/td&gt;'+
                      '&lt;/tr&gt;'+
                  '&lt;/table&gt;'+ 
              '&lt;button class="btn btn-block btn-sm" style="margin-right: 15%;"&gt;EDIT&lt;/button&gt;'+
              '&lt;button class="btn btn-block btn-sm remove"&gt;REMOVE&lt;/button&gt;'+
              '&lt;hr&gt;'+
                  '&lt;div class="form-group"&gt;'+
                  '&lt;label for="cardamount"&gt;Amount&lt;/label&gt;'+
                  '&lt;input class="form-control" id="cardamount" name="cardamount" type="text" value="'+cardamount+'"/&gt;'+
                  '&lt;/div&gt;'+
                  '&lt;div class="form-group"&gt;'+
                  '&lt;label for="cardquantity"&gt;Quantity&lt;/label&gt;'+
                  '&lt;input class="form-control" id="cardquantity" name="cardquantity" type="text" value="'+cardquantity+'"/&gt;'+
                  '&lt;/div&gt;'+
                  '&lt;div class="form-group"&gt;'+
                  '&lt;label for="cardimg"&gt;Img&lt;/label&gt;'+
                  '&lt;input class="form-control" id="cardimg" name="cardimg" type="text" value="'+cardimg+'"/&gt;'+
                  '&lt;/div&gt;'+
                  '&lt;div class="form-group"&gt;'+
                  '&lt;label for="cardimg"&gt;gcardID&lt;/label&gt;'+
                  '&lt;input class="form-control" id="gcardID" name="gcardID" type="text" value="'+cardID+'"/&gt;'+
                  '&lt;/div&gt;'+
              '&lt;/div&gt;';
  $(order).appendTo('#orderList');
  </code></pre>
  
  <p>Can somebody tell me what I'm missing to get my expected output? Thanks</p>