title: jQuery append only happens once
body: <p>My intention is for a new <code>&lt;input&gt;</code> fields to be created every time there is only one blank one left - so when the top one loses focus. This happens, but only once (so only three <code>&lt;input&gt;</code> fields can ever be made.</p>
  
  <p>My working example is at <a href="http://sas98.user.srcf.net/guestlist/" rel="nofollow">http://sas98.user.srcf.net/guestlist/</a> under number 4.</p>
  
  <p>The code is:</p>
  
  <pre><code>&lt;div id="names"&gt;
  &lt;p&gt;&lt;input class="input" type="text" name="name1" /&gt;&lt;/p&gt;
  &lt;p&gt;&lt;input class="input" type="text" name="name2" /&gt;&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;script type="text/javascript"&gt;
  $(document).ready(function() {
  var name = $("&lt;p&gt;&lt;input class='input' type='text' /&gt;&lt;/p&gt;");
      $('.input').blur(function() {
          if($(this).val().length&gt;0) {
              $('#names').append(name.clone());
          }
      });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>EDIT:</p>
  
  <pre><code>            $('#names').append(name);
  </code></pre>
  
  <p>Changed to</p>
  
  <pre><code>        $('#names').append(name.clone());
  </code></pre>
  
  <p>Makes it work a couple more times before getting stuck. It seems temperamental - I can't see a pattern to it.</p>