title: How to add jQuery validation to cloned sections?
body: <p>In the original form section, the validation works fine, but the cloned form section doesn't have the validation.</p>
  
  <p>When the original section has an error message, adding will give a new cloned form section but with a duplicated error message.</p>
  
  <p>Making a cloned form section must not show up any error messages and it should validates its own fields only.</p>
  
  <p>So how to add jQuery validation separately to cloned sections?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>/*
   jQuery validation: https://jqueryvalidation.org/
  */
  $("#aform").validate({
    rules: {
      fullname: {
        required: true
      }
    },
    messages: {
      fullname: {
        required: "Please enter your Full Name."
      }
    }
  });
  
  function addval2() {
    $("#aform").validate({
      rules: {
        fullname_2: {
          required: true
        }
      },
      messages: {
        fullname_2: {
          required: "Please enter your Full Name.2"
        }
      }
    });
  }
  
  /*
   Code for cloning form section.
   Plugin repo: https://github.com/tristandenyer/Clone-section-of-form-using-jQuery
  */
  $(function() {
    $('#btnAdd').click(function() {
      var num = $('.clonedInput').length, // Checks to see how many "duplicatable" input fields we currently have
        newNum = new Number(num + 1), // The numeric ID of the new input field being added, increasing by 1 each time
        newElem = $('#entry' + num).clone(false).attr('id', 'entry' + newNum).hide().fadeIn('slow'); // create the new element via clone(), and manipulate it's ID using newNum value
  
      // New attributes (id, class, name) for cloned inputs   
      newElem.find('.fullname')
        .attr('id', 'fullname_' + newNum)
        .attr('class', 'fullname_' + newNum)
        .attr('name', 'fullname_' + newNum).val('');
  
      newElem.find('.error').remove();
  
      // Add validation for cloned sections.
      addval2();
  
      // Insert the new element after the last "duplicatable" input field
      $('#entry' + num).after(newElem);
  
      // Enable the "remove" button. This only shows once you have a duplicated section.
      $('#btnDel').attr("style", "visibility: true");
  
      // Max form sections, including the original.
      if (newNum == 2)
        $('#btnAdd').attr('disabled', true).prop('value', "You've reached the limit"); // value here updates the text in the 'add' button when the limit is reached  
    });
  
    $('#btnDel').click(function() {
      var num = $('.clonedInput').length;
      // how many "duplicatable" input fields we currently have
      $('#entry' + num).slideUp('slow', function() {
        $(this).remove();
        // if only one element remains, disable the "remove" button
        if (num - 1 === 1)
          $('#btnDel').attr("style", "visibility: hidden");
        // enable the "add" button
        $('#btnAdd').attr('disabled', false).prop('value', "add section");
      });
      return false; // Removes the last section you added
    });
  
    // Enable the "add" button
    $('#btnAdd').attr('disabled', false);
    // Disable the "remove" button
    $('#btnDel').attr("style", "visibility: hidden");
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h1&gt;jQuery validation and cloning form sections&lt;/h1&gt; 
  
  &lt;div id="entry1" class="clonedInput"&gt;
    &lt;h2&gt;Form&lt;/h2&gt;
    &lt;form id="aform" class="aform" name="aform" method="get"&gt;
      &lt;div&gt;
        &lt;label for="fullname"&gt;Full Name&lt;/label&gt;
        &lt;input id="fullname" class="fullname" name="fullname" minlength="2" required&gt;
      &lt;/div&gt;
    &lt;/form&gt;
  &lt;/div&gt;
  
  &lt;p&gt;
    &lt;button type="button" id="btnAdd" name="btnAdd" class="btn btn-info"&gt;add section&lt;/button&gt;
    &lt;button type="button" id="btnDel" name="btnDel" class="btn btn-danger"&gt;remove section above&lt;/button&gt;
  &lt;/p&gt;
  
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://cdn.jsdelivr.net/jquery.validation/1.15.1/jquery.validate.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>