title: How to append HTML content using Jquery
body: <p>All what I want to do is, when the user clicks on a button, the content of the <code>div</code> should append at the bottom. My code works fine if I paste the content inside the <code>div</code> in the javascript displayed below:</p>
  
  <p>My question: </p>
  
  <p>1.) Without having to copy paste the code that was in the <code>HTML</code> to <code>JAVASCRIPT</code> is there any other way I could get this done.</p>
  
  <p>2.) I want the <code>name</code> and also the <code>value</code> attribute of the input field to be unique (like append a number at the end ). How can I do this ?</p>
  
  <p>My <code>jQuery</code> looks like this:</p>
  
  <pre><code> $(document).ready(function(){
  
  
        $("#btn").click(function(){
            $("#boxid").append('&lt;br/&gt;
  &lt;div class="input-group"&gt;
                      &lt;input type="text" class="form-control" id="myid" placeholder="hey" value="2"&gt;
                      &lt;div class="input-group-addon"&gt;?&lt;/div&gt;
                    &lt;/div&gt;
              ');
        });
  
    });
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;button id="btn"&gt;Add another row&lt;/button&gt;
   &lt;form action="gone/" method="get"&gt;
  &lt;div id="boxid"&gt;
                    &lt;div class="input-group"&gt;
                      &lt;input type="text" class="form-control" id="myid" placeholder="hey" value="2"&gt;
                      &lt;div class="input-group-addon"&gt;?&lt;/div&gt;
                    &lt;/div&gt;
  
  &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>