title: Clone and change classname +1 and name of fields
body: <p>I am trying to figure out how to clone this div so that the cloned version has product 2 as its class name as well as the input nams to have rate2 and notes2. </p>
  
  <pre><code>&lt;div class="product1"&gt;   
      &lt;input id="rate1" name="rate1" type="number"&gt;
      &lt;input name="notes" type="text"&gt;
  &lt;div&gt;
  </code></pre>
  
  <p><strong>Trying to append in here ****</strong> </p>
  
  <pre><code>&lt;div class="sixteen columns" id="addproduct"&gt;
     &lt;label&gt;&lt;i class="fa fa-plus-square"&gt;&lt;/i&gt; Add another product&lt;/label&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>=================================================================================</p>
  
  <p>I have a rough idea of how to clone it but thats as far as my knowledge goes. I have looked at other posts and can't see an easy way of doing it. </p>
  
  <p>JQuery- </p>
  
  <pre><code>$(document).ready(function(){
          $("#addproduct").click(function(){
              $(".product1").clone().appendTo("body");
          });
  });
  </code></pre>
  
  <p>Thanks for any help! </p>