title: Jquery: How to clone <div> based on the count?
body: <p>I am trying to use jquery clone() for displaying cards on my web page. When the page loads it has to clone card div based on the count of rooms in that particular location. I hardcoded count as <strong>roomcount</strong>. I tried using simple for loop as per <a href="https://stackoverflow.com/a/12835644/6915446">https://stackoverflow.com/a/12835644/6915446</a>, However it doubles the count of divs each time. Please provide me right inputs. </p>
  
  <pre><code>&lt;div class="container-fluid"&gt;
  &lt;div class="row-fluid"&gt;
  &lt;div class="col-lg-2"&gt;
      &lt;div class="card"&gt;
          &lt;h6 class="card-header"&gt;NC001
              &lt;ul class="card-header-pills pull-xs-right"&gt;
                  &lt;span class="badge badge-primary" aria-hidden="true"&gt;2&lt;/span&gt;
                  &lt;!-- &lt;span class="glyphicon glyphicon-user" aria-hidden="true"&gt;&lt;/span&gt; --&gt;
              &lt;/ul&gt;
          &lt;/h6&gt;
          &lt;div class="card-block" id="scrollCard"&gt;
            &lt;h4 class="card-title"&gt;&lt;/h4&gt;
               &lt;!-- &lt;p class="card-text"&gt;ICU : 12.00 AM&lt;/p&gt;
                &lt;p class="card-text"&gt;VEN : 1.00 AM&lt;/p&gt; --&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;script&gt;
      var roomcount = 3;
         $(document).ready(function() {
          for(var i=0; i&lt; roomcount; i++) {
            $(".col-lg-2").clone().appendTo(".row-fluid");
        }
  
        });
      &lt;/script&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>
    </p>
  
  <p>Thanks. </p>
  
  <p><em>When the count is 2, it clones to display 4 divs:</em></p>
  
  <p><img src="https://i.stack.imgur.com/0C1M3.png" alt="When the count is 2, it clones to display 4 divs"></p>
  
  <p><em>When the count is 3, it clones to displays 8 divs:</em></p>
  
  <p><img src="https://i.stack.imgur.com/uxAwC.png" alt="When the count is 3, it clones to displays 8 divs"></p>