title: Javascript make visible and add multiple divs on click-Almost working now
body: <p>Im trying to use Javascript to to add a  section to a page when  a button is clicked. I can't get this to work though. My codepen is <a href="https://codepen.io/anon_guy/pen/VMZWWW" rel="nofollow noreferrer">https://codepen.io/anon_guy/pen/VMZWWW</a></p>
  
  <p>(Thanks for the help I've gotten it close to where I want it, however The element is still visible initially, it should be hidden but if I set display to none in CSS the JS doesn't change it. The code has changed quite a bit here is what I've got going currently</p>
  
  <p><strong>HTML :</strong>   </p>
  
  <pre><code> &lt;div class="panel panel-default"&gt;
    &lt;div class="panel-heading"&gt;
    &lt;/div&gt;
    &lt;div class="panel-body"&gt;
      &lt;form action="&lt;?php echo $action; ?&gt;" method="post" enctype="multipart/form-data" id="form-event" class="form-horizontal"&gt;
        &lt;div class="col-sm-4"&gt;
          &lt;label&gt;name&lt;/label&gt;
          &lt;input type="text" name="name" value="name" placeholder="name" id="name" class="form-control" /&gt;
        &lt;/div&gt;
        &lt;div class="col-sm-4"&gt;
          &lt;label&gt;address&lt;/label&gt;
          &lt;input type="text" name="address" value="address" placeholder="address" id="address" class="form-control" /&gt;
        &lt;/div&gt;
        &lt;div class="col-sm-4"&gt;
          &lt;label&gt;phone&lt;/label&gt;
          &lt;input type="text" name="phone" value="phone" placeholder="phone" id="phone" class="form-control" /&gt;
          &lt;div class="text-danger"&gt;&lt;/div&gt;
        &lt;/div&gt;
  
      &lt;/form&gt;
    &lt;/div&gt;
    &lt;div class="row"&gt;
    &lt;div class="add_component"&gt;
      &lt;button id='launch'&gt;Add Component&lt;/button&gt;
    &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="wrapper"&gt;
    &lt;div class="panel panel-default " id="addon"&gt;
      &lt;div class="panel-heading"&gt;
      &lt;/div&gt;
      &lt;div class="panel-body"&gt;
        &lt;form action="&lt;?php echo $action; ?&gt;" method="post" enctype="multipart/form-data" id="form-event" class="form-horizontal"&gt;
          &lt;div class="col-sm-6"&gt;
            &lt;label&gt;component&lt;/label&gt;
            &lt;iv&gt;
  
        &lt;/form&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;iv&gt;
  
        &lt;/form&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>JS :</strong> </p>
  
  <pre><code> document.getElementById('launch').onclick = function() {
      var addOnDiv = document.getElementById('addon');
  
      if (addOnDiv.style.display === 'none') {
        addOnDiv.style.display = 'block';
      } else {
  
        var clonedNode = addOnDiv.cloneNode(true);
        addOnDiv.appendChild( clonedNode );      
      }
    }
  </code></pre>
  
  <p><strong>CSS :</strong></p>
  
  <pre><code>button {
    float: right;
    margin: 30px;
  }
  
  .panel-body {
    border: 1px solid #333;
    background: azure;
  }
  #addon{
    display:none;
  }
  </code></pre>