title: How to use Jquery to add / remove form elements
body: <p>I'm currently designing / coding a new website for my employer who is a printer manufacturer. Customers can register to download software and manuals via the website.</p>
  
  <p>I want to add a little bit of professionalism to the registration form and wondered if it was possible to do with jQuery. Note: My jQuery knowledge is very limited, but I'm trying to improve one that!</p>
  
  <p>I have jquery, jquery easing and ui all linked in the page.</p>
  
  <p>The part of the form I wish to meddle with looks like this:</p>
  
  <p><a href="https://i.stack.imgur.com/P0nIE.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/P0nIE.jpg" alt="html5 form"></a></p>
  
  <p>A customer usually has anywhere between 1 &amp; 6 systems, all with their own serial number and possibly a license key. I'd initially like to just display the select system select box, then once a selection has been made show the serial number box. Then once this has been filled in also, then show the license key box and the 'add another system' button.</p>
  
  <p>Then if a customer has another system, they can click the button and it will add a clone of the first (i.e. add a new select system box to be filled in, before showing the other boxes and another add system button). The only exception, would be that it would probably need a remove button, in case the customer hits add too many times. This new remove button could then be hidden when another system is selected.</p>
  
  <p>So something like so:</p>
  
  <p><a href="https://i.stack.imgur.com/ur1eC.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ur1eC.jpg" alt="jquery dynamic changes"></a></p>
  
  <p>I'd want to limit it to only allowing 6 sets of system details. Each time with a number amended onto the field name.</p>
  
  <p>this section of the current html5 looks like so:</p>
  
  <p>IGNORE THIS NOW UPDATED CODE AT THE BOTTOM (18/5/16)</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;hr class="line"&gt;
  &lt;div class="eleven columns top-2 bottom-2"&gt;
    &lt;h3 class="title bottom-2"&gt;System Details&lt;/h3&gt;
    &lt;div class="form-box"&gt;
      &lt;label&gt;System &lt;small&gt;*&lt;/small&gt;
      &lt;/label&gt;
      &lt;select name="system"&gt;
        &lt;option&gt;Select system&lt;/option&gt;
        &lt;option value="CPM-200"&gt;CPM-200&lt;/option&gt;
        &lt;option value="CPM-100"&gt;CPM-100&lt;/option&gt;
        &lt;option value="CPM-100H"&gt;CPM-100H&lt;/option&gt;
        &lt;option value="CJ Pro"&gt;CJ Pro&lt;/option&gt;
        &lt;option value="CJ-200C"&gt;CJ-200C&lt;/option&gt;
        &lt;option value="CM-200"&gt;CM-200&lt;/option&gt;
      &lt;/select&gt;
    &lt;/div&gt;
    &lt;div class="form-box"&gt;
      &lt;label&gt;Serial Number &lt;small&gt;*&lt;/small&gt;
      &lt;/label&gt;
      &lt;input type="text" name="serial1" class="text" required&gt;
    &lt;/div&gt;
    &lt;!-- End Box --&gt;
    &lt;div class="form-box"&gt;
      &lt;label&gt;License Key (if known)&lt;/label&gt;
      &lt;input type="text" name="license1" class="text" placeholder="e.g. ABCD1-EFGH2-IJKL3-MNOP4-QRST5" value="&lt;?php echo htmlentities(strip_tags($company)); ?&gt;"&gt;
    &lt;/div&gt;
    &lt;!-- End Box --&gt;
    &lt;div class="form-box"&gt;
      &lt;a href="#" class="button medium secondary" style="margin-top: 35px; padding: 14px 30px;"&gt;Add Another System?&lt;/a&gt;
    &lt;/div&gt;
    &lt;!-- End Box --&gt;
  &lt;/div&gt;
  &lt;div class="clearfix"&gt;&lt;/div&gt;
  &lt;input type="submit" value="Register" class="button medium color" /&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>As you can see, its quite complicated and a big ask! And I am out of my league, so some friendly pointers would be much appreciated.</p>
  
  <p>Thank you.</p>
  
  <hr>
  
  <h2>EDIT 18/5</h2>
  
  <p>Please forgive my rudimental jquery code, like I said I'm no expert, but hoping you could all suggest some improvements. At the moment I add the html in as an append to the wrapper using the javascript, as this allows me to remove the systems.</p>
  
  <p>So far I've managed to figure out how to add divs for each system, give them ids and only allow 6 in total. I can also remove systems if they were removed.</p>
  
  <p>What I can't do is:</p>
  
  <p>Show the serial box on more that the first id (as I don't know how to fix an id with a number of x after the name - i.e. system5 to show the serial5 box. Thoughts?</p>
  
  <p>If a customer deletes a box, and then adds a new one, how do I make the new one have the lowest id number available. i.e. if a customer has all six systems, then deletes number 4, if they want to add another system again how do I get it to find that 4 and add a new system4?</p>
  
  <p>Code as it is at the moment:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// Registration form element show / hide function
  $(document).ready(function() {
    var max_systems = 6; // maximum input boxes allowed
    var wrapper  = $(".system-wrap"); // Fields wrapper
    var add_button = $(".system-button"); // Add button ID
  
    var x = 1; // initial systems count
    $(add_button).click(function(e){ // on add button click
      e.preventDefault();
      if(x &lt; max_systems){ // max systems allowed
        x++; // system increment
        $(wrapper).append("&lt;div class='system-wrap top-2 bottom-2'&gt;" + "\n" + "&lt;hr class='line bottom-2'&gt;" + "\n" + "&lt;div class='form-box'&gt;" + "\n" + "&lt;label&gt;System &lt;small&gt;*&lt;/small&gt;&lt;/label&gt;" + "\n" + "&lt;select name='system" + x + "'&gt;" + "\n" + "&lt;option value=''&gt;Select system&lt;/option&gt;" + "\n" + "&lt;option value='CPM-200'&gt;CPM-200&lt;/option&gt;" + "\n" + "&lt;option value='CPM-100'&gt;CPM-100&lt;/option&gt;" + "\n" + "&lt;option value='CPM-100H'&gt;CPM-100H&lt;/option&gt;" + "\n" + "&lt;option value='CJ Pro'&gt;CJ Pro&lt;/option&gt;" + "\n" + "&lt;option value='CJ-200C'&gt;CJ-200C&lt;/option&gt;" + "\n" + "&lt;option value='CM-200'&gt;CM-200&lt;/option&gt;" + "\n" + "&lt;/select&gt;" + "\n" + "&lt;/div&gt;" + "\n\n" + "&lt;div class='form-box' id='serial" + x + "'&gt;" + "\n" + "&lt;label&gt;Serial Number &lt;small&gt;*&lt;/small&gt;&lt;/label&gt;" + "\n" + "&lt;input type='text' name='serial" + x + "' id='serialbox" + x + "' class='text' placeholder='e.g. 01234567L or CJP01-1234' value='' required&gt;" + "\n" + "&lt;/div&gt;&lt;!-- End Box --&gt;" + "\n\n" + "&lt;div class='form-box' id='license" + x + "'&gt;" + "\n" + "&lt;label&gt;License Key (if known)&lt;/label&gt;" + "\n" + "&lt;input type='text' name='license" + x + "' class='text' placeholder='e.g. ABCD1-EFGH2-IJKL3-MNOP4-QRST5' value=''&gt;" + "\n" + "&lt;/div&gt;&lt;!-- End Box --&gt;" + "\n" + "&lt;div class='form-box remove-field'&gt;" + "\n" + "&lt;a href='#' class='button medium secondary' style='margin-top: 38px; padding: 14px 30px;'&gt;Remove?&lt;/a&gt;" + "\n" + "&lt;/div&gt;&lt;!-- End Box --&gt;" + "\n" + "&lt;/div&gt;" + "\n\n" + "&lt;div class='clearfix'&gt;&lt;/div&gt;" + "\n"); // add remove button
      }
    });
  
    $(wrapper).on("click",".remove-field", function(e){ // user click on remove text
      e.preventDefault(); $(this).parent(".sys").remove(); x--;
    })
  });
  
  $('#system').on('change',function(){
    if ($(this).val() != "")  {
      $('#serial').show();
    } else {
      $('#serial').hide();
    }
  } );
  
  $('#serialbox').on("keyup", function(){
    if ($(this).val().length &gt; 0)  {
      $('#license').show();
    } else {
      $('#license').hide();
    }
  } );</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#serial, #license {
    display: none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="eleven columns top-2 bottom-2 system-details"&gt;
    &lt;h3 class="title bottom-2"&gt;System Details&lt;/h3&gt;
    &lt;p&gt;You may register up to 6 different Lighthouse products below.&lt;/p&gt;
    &lt;div class="systems top-2"&gt;
  
      &lt;div class="system-wrap"&gt;
        &lt;div class="form-box"&gt;
          &lt;label&gt;System &lt;small&gt;*&lt;/small&gt;&lt;/label&gt;
            &lt;select name="system" id="system"&gt;
              &lt;option value=""&gt;Select system&lt;/option&gt;
              &lt;option value="CPM-200"&gt;CPM-200&lt;/option&gt;
              &lt;option value="CPM-100"&gt;CPM-100&lt;/option&gt;
              &lt;option value="CPM-100H"&gt;CPM-100H&lt;/option&gt;
              &lt;option value="CJ Pro"&gt;CJ Pro&lt;/option&gt;
              &lt;option value="CJ-200C"&gt;CJ-200C&lt;/option&gt;
              &lt;option value="CM-200"&gt;CM-200&lt;/option&gt;
            &lt;/select&gt;
          &lt;/div&gt;
  
          &lt;div class="form-box" id="serial"&gt;
            &lt;label&gt;Serial Number &lt;small&gt;*&lt;/small&gt;&lt;/label&gt;
            &lt;input type="text" name="serial" id="serialbox" class="text" placeholder="e.g. 01234567L or CJP01-1234" value="" required&gt;
          &lt;/div&gt;&lt;!-- End Box --&gt;
  
          &lt;div class="form-box" id="license"&gt;
            &lt;label&gt;License Key (if known)&lt;/label&gt;
            &lt;input type="text" name="license" class="text" placeholder="e.g. ABCD1-EFGH2-IJKL3-MNOP4-QRST5" value=""&gt;
          &lt;/div&gt;&lt;!-- End Box --&gt;
  
          &lt;div class="clearfix"&gt;&lt;/div&gt;
  
        &lt;/div&gt;&lt;!-- End System Wrap --&gt;
      &lt;/div&gt;&lt;!-- End Systems --&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Thanks all.</p>