javascript - JavaScript add 要素メソッドの倍増は追加されません

Question

divボタンがクリックされたときに、JavaScript を使用して要素のコピーを作成しようとしています。メソッドを使用して.cloneNode()いますが、結果が乗算されています。

最初は、ページ上に要素のインスタンスが 1 つあります。クリックすると2倍になりますが、次のクリックでは4倍になります。個別に追加する必要があるため、クリック-> 3、クリック-> 4など.

私のコードペンは: https://codepen.io/anon_guy/pen/VMZWWW

HTML:

<div class="panel panel-default">
  <div class="panel-heading">
  </div>
  <div class="panel-body">
    <form action="<?php echo $action; ?>" method="post" enctype="multipart/form-data" id="form-event" class="form-horizontal">
      <div class="col-sm-4">
        <label>name</label>
        <input type="text" name="name" value="name" placeholder="name" id="name" class="form-control" />
      </div>
      <div class="col-sm-4">
        <label>address</label>
        <input type="text" name="address" value="address" placeholder="address" id="address" class="form-control" />
      </div>
      <div class="col-sm-4">
        <label>phone</label>
        <input type="text" name="phone" value="phone" placeholder="phone" id="phone" class="form-control" />
        <div class="text-danger"></div>
      </div>

    </form>
  </div>
  <div class="row">
  <div class="add_component">
    <button id='launch'>Add Component</button>
  </div>
  </div>
</div>
<div class="wrapper">
  <div class="panel panel-default " id="addon">
    <div class="panel-heading">
    </div>
    <div class="panel-body">
      <form action="<?php echo $action; ?>" method="post" enctype="multipart/form-data" id="form-event" class="form-horizontal">
        <div class="col-sm-6">
          <label>component</label>
          <input type="text" name="component" value="component" placeholder="component" id="component" class="form-control" />
        </div>

      </form>
    </div>
  </div>
</div>

JS:

document.getElementById('launch').onclick = function() {
    var addOnDiv = document.getElementById('addon');
    var clonedNode = addOnDiv.cloneNode(true);
    addOnDiv.appendChild(clonedNode );
}