title: generate JSON data based on input fields
body: <p>I would like to generate JSON data based on the following input fields:
  name
  uRL
  where the JSON data output would look something like this: </p>
  
  <pre><code>{   
  "items": [
      {
          "url": "content/San-Francisco/berkeleyCampanile.jpg",
          "name": "Image 1 name"
      },
      {
          "url": "content/San-Francisco/castro.jpg",
          "name": "Image 2 name"
      },
      {
          "url": "content/San-Francisco/Tenderloin.jpg",
          "name": "Image 3 name"
      }
  ]
  }
  </code></pre>
  
  <p>How it works right now is that theres two input field, name and url, and users can add another set of name and url inputs by clicking on the add button as shown on the picture</p>
  
  <p><img src="https://i.stack.imgur.com/1hfrS.png" alt="enter image description here"></p>
  
  <p>What I want is that when the user hits on generate it output based on all of the input filled the json data as shown on the format above.</p>
  
  <p>Below is the code:</p>
  
  <p></p>
  
  <pre><code>&lt;head&gt;
  
        &lt;link href="css/style.css" rel="stylesheet"&gt;
  &lt;script src="//code.jquery.com/jquery-1.11.2.min.js"&gt;&lt;/script&gt;
  &lt;script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;fieldset id="buildyourform"&gt;
      &lt;legend&gt;test&lt;/legend&gt;
  &lt;/fieldset&gt;
  &lt;input type="button" value="Add a field" class="add" id="add" /&gt;
  &lt;input type="button" value="Generate" class="add" id="preview" /&gt;&amp;nbsp;
  
  &lt;script&gt;
  
  $(document).ready(function() {
      $("#add").click(function() {
          var intId = $("#buildyourform div").length + 1;
          var fieldWrapper = $("&lt;div class=\"fieldwrapper\" id=\"field" + intId + "\"/&gt;");
       var name = $("&lt;input type=\"text\" \"id=\"name\"placeholder=\"Name of Neighborhood\"class=\"fieldname\" /&gt;");
         var url = $("&lt;input type=\"text\"id=\"url\"placeholder=\"Paste here the URL of the Image\"class=\"fieldname\" /&gt;");
  
  
          var removeButton = $("&lt;input type=\"button\"class=\"remove\" value=\"Remove\" /&gt;");
          removeButton.click(function() {
              $(this).parent().remove();
          });
          fieldWrapper.append(name);
                  fieldWrapper.append(url);
  
          fieldWrapper.append(removeButton);
          $("#buildyourform").append(fieldWrapper);
      });
  
  });
  
  &lt;/script&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>Any help will be greatly appreciated</p>
  
  <p>Update:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  
        &lt;link href="css/style.css" rel="stylesheet"&gt;
  &lt;script src="//code.jquery.com/jquery-1.11.2.min.js"&gt;&lt;/script&gt;
  &lt;script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;form id="myform"&gt;
  &lt;fieldset id="jsonBuilder"&gt;
      &lt;legend id="legendHead"&gt;Neighboorhood Creation&lt;/legend&gt;
  &lt;/fieldset&gt;
  &lt;input type="button" value="Add a field" class="add" id="add" /&gt;
  &lt;input type="submit" value="generate" class="add"&gt;
  &lt;/form&gt;
  
  &lt;script&gt;
  
   function showValues() {
   var frm = $('#myform');
   var data = JSON.stringify(frm.serializeArray());
  }
  &lt;/script&gt;
  
  &lt;script&gt;
  
  $(document).ready(function() {
      $("#add").click(function() {
          var intId = $("#buildyourform div").length + 1;
          var fieldWrapper = $("&lt;div class=\"fieldwrapper\" id=\"field" + intId + "\"/&gt;");
          var name = $("&lt;input type=\"text\" \"id=\"name\"placeholder=\"Name of Neighborhood\"class=\"fieldname\" /&gt;");
             var url = $("&lt;input type=\"text\"id=\"url\"placeholder=\"Paste here the URL of the Image\"class=\"fieldname\" /&gt;");
  
          var removeButton = $("&lt;input type=\"button\"class=\"remove\" value=\"Remove\" /&gt;");
          removeButton.click(function() {
              $(this).parent().remove();
          });
          fieldWrapper.append(name);
                  fieldWrapper.append(url);
  
          fieldWrapper.append(removeButton);
          $("#jsonBuilder").append(fieldWrapper);
      });
  
  });
  
  &lt;/script&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>