title: Dynamically save & add new input field to bottom of form when submit button is pressed | JADE / NODE JS
body: <p>I have an interesting one to approach today and was hoping you might be able to shed some light on how to approach this task!</p>
  
  <p>I'm trying to build a form that will feature three main elements; </p>
  
  <ul>
  <li>list title</li>
  <li>List description</li>
  <li>List contents []</li>
  </ul>
  
  <p>See below for how I have my form currently rendered (Just simple bootstrap / Jade)</p>
  
  <p><img src="https://i.stack.imgur.com/gyjdR.png" alt="Current view"></p>
  
  <p>The seemingly difficult part is how to display the content array for users be able to add / edit entries. </p>
  
  <p>What I want is for each entry in the content array to be displayed as an </p>
  
  <pre><code>&lt;input type="text"&gt;
  </code></pre>
  
  <p>element and have the value pre-filled depending on what was saved in the array (database side). </p>
  
  <p>I was thinking something along the lines of (forgive sudo code):</p>
  
  <pre><code>// postgres database extraction
  pg.connect(process.env.DATABASE_URL, function(err, client, done) {
      if(err) {
          return console.error('error fetching client from pool', err);
      }
      var query = client.query('SELECT title, description, content FROM lists WHERE listid = id');
  
      query.on('row', function(row) {
          done();
          if(err) {
              return console.error('error fetching client list from pool', err);
          }
          console.log(JSON.stringify(row));
      });
  });
  // Where content is an array with each line representing an entry, I'm still not sure how to extract this to an array
  
  var contentList = row[2][];
  
  // Begin JADE template
  
  form.form-horizontal(method='post', role='form')
      input(name='_csrf', type='hidden', value=csrfToken)
  
      //(*title and description inputs here*)
      // Iterates through each element in the content 
      contentList.forEach(function(entry) {
  
          label.col-sm-4 Short Description
              div.col-sm-8
                  input.form-control(
                      placeholder='New list line',
                      required=true,
                      name='listDescription',
                      type='text',
                      value=contentList[entry])
      });
  </code></pre>
  
  <p>I want to get it so that when a user types into the bottom input box, that content is added to the content list array, and a new input box is dynamically generated below it. (neverending form).</p>
  
  <p><img src="https://i.stack.imgur.com/fgpJL.png" alt="How I want it to function"></p>
  
  <p>Just as when new input boxes are edited they are saved, I want users to be able to click on any input box, see a + appear to the right of it, and they can save content in a similar manner.</p>
  
  <p>This functionality is quite ambitious for my abilities (new to node / js), so I thought best to ask here for directional advice before I waste countless hours making mistakes. Any help appreciated!</p>
  
  <p>Edit: spelling.</p>