title: Add Div's on Click with counter & limit
body: <p>I would like to add some functionality with the below code that only 5 times one can click the add button. </p>
  
  <p>Also I would like to add a delete button with every replicated so when clicked, div is deleted and the counter of the 5 times is decreased. </p>
  
  <p>HTML:</p>
  
  <pre><code>    &lt;button id="button" onlick="duplicate()"&gt;Add another plan&lt;/button&gt;
  &lt;div id="duplicater"&gt;
      &lt;p&gt;Choose Your Mobile Plan&lt;/p&gt;
      &lt;select&gt;
          &lt;option value="1"&gt;Package 1&lt;/option&gt;
          &lt;option value="2"&gt;Package 2&lt;/option&gt;
          &lt;option value="3"&gt;Package 3&lt;/option&gt;
          &lt;option value="4"&gt;Package 4&lt;/option&gt;
          &lt;option value="5"&gt;Package 5&lt;/option&gt;
          &lt;option value="6"&gt;Package 6&lt;/option&gt;
      &lt;/select&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>document.getElementById('button').onclick = duplicate;
  
  var i = 0; var original = document.getElementById('duplicater');
  
  function duplicate() {
      var clone = original.cloneNode(true); // "deep" clone
      clone.id = "duplicater" + ++i; // there can only be one element with an ID
      original.parentNode.appendChild(clone); }
  </code></pre>
  
  <p>A JSFiddle can be found here: <a href="http://jsfiddle.net/7x4re/" rel="nofollow">http://jsfiddle.net/7x4re/</a></p>