title: jQuery loop and append dynamic list on keyup
body: <p>I'm trying to build a simple form with two fields: <code>label</code> and <code>value</code>. After filling in those fields the user should hit the <code>Enter</code> key and two more fields (label and value) should appear. This far I managed to get everything to work fine. Now, I need the input-data from each label and value field to populate an unordered list. </p>
  
  <p>As far as I figured out the pseudo-code should be something like this: if the <code>Enter</code> key is pressed create two new text fields (label and value), copy the input-data and display it inside an <code>li</code> element; then repeat. </p>
  
  <p>The code I tried is below, I'm missing a loop on the <code>keyup</code> function but even without it the <code>li</code> elements don't show up only after I create two new fields and I go back to edit the first two (check the <a href="http://jsfiddle.net/SSjBg/2/" rel="nofollow">JSfiddle.</a>). I did tried to code a loop on this function but everything failed so I thought about posting here, maybe I'm looking at this all wrong.  </p>
  
  <p>This is the HTML code: </p>
  
  <pre><code>&lt;button id="addChart"&gt;Add Chart Label and Value&lt;/button&gt;
  &lt;div id="label"&gt;
      &lt;p&gt;
          &lt;label for="label"&gt;
              &lt;input type="text" id="labelrow" size="20" name="label" value="" placeholder="Input Label" /&gt;
          &lt;/label&gt;
          &lt;label for="value"&gt;
              &lt;input type="text" id="valuerow" size="20" name="value" value="" placeholder="Input Value" /&gt;
          &lt;/label&gt;
      &lt;/p&gt;
  &lt;/div&gt;
  &lt;ul class="jrGraph"&gt;
      &lt;li&gt;
          &lt;span class="label"&gt;&lt;/span&gt;
          &lt;span class="value"&gt;&lt;/span&gt;        
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>This is the jQuery script: </p>
  
  <pre><code>$(function () {
      var scntDiv = $('#label');
      var i = $('#label p').size() + 1;
  
      $('#addChart').on('click', function () {
          $('&lt;p&gt;&lt;label for="label"&gt;&lt;input type="text" id="labelrow" size="20" name="label_' + i + '&lt;p&gt;&lt;label for="value"&gt;&lt;input type="text" id="valuerow" size="20" name="value_' + i + '" value="" placeholder="Input Value" /&gt;&lt;/label&gt; &lt;a href="#" class="remScnt"&gt;Remove&lt;/a&gt;&lt;/p&gt;').appendTo(scntDiv);
          i++;
          return false;
      });
  
      $('#label').keyup(function (event) {
          if (event.keyCode == 13) {
              $('#addChart').click();
              $("#labelrow").on("keyup change", function () {
                  $('span.label').text(this.value);
              });
              $("#valuerow").on("keyup change", function () {
                  $('span.value').text(this.value);
              });
          }
      });
  
      $('#label').on('click', '.remScnt', function () {
          if (i &gt; 2) {
              $(this).parents('p').remove();
              i--;
          }
          return false;
      });
  });
  </code></pre>
  
  <p>and <a href="http://jsfiddle.net/SSjBg/2/" rel="nofollow">JSfiddle.</a> </p>