javascript - eventlistener を使用した要素の複製

Question

ボタンをクリックしたときに要素を複製しようとしています。これまでのところ、私のコードの問題が何であるかはわかりません。私はそれがちょっと正しいように見えると思います. よく見て、私に問題を教えて/説明してもらえますか? つまり、クローンノードに関するドキュメントをたくさん読んでいて、同じことをしているだけです。そして、コードに目を通すと、それは私には理にかなっていますが、機能したくありません... D: ボタンはフィールド全体を複製する必要があります(inputCar)

ここに私のフィドルがあります https://jsfiddle.net/7k1sb7w0/

これはhtmlコードです：

<button id="buttonBtn">Clone Field</button>

<div id="inputCar">
  <div class="column">
    <label class="heading">Invite Persons</label>
  </div>
  <div class="medium-6 column">
    <label for="ext-name">Name</label>
    <input id="ext-name" type="text">
    <input type="checkbox">
    <label for="check7"></label>
    <label>BMW</label>

    <input type="checkbox" checked="true">
    <label for="check8"></label>
    <label>Ford</label>
  </div>

  <div class="medium-6 column">
    <label for="ext-mail">E-Mail</label>
    <input id="e-mail" type="email">
    <datalist id="members"></datalist>
    <button class="deletePerson">delete</button>
    <label class="delete_btn">delete Field</label>
  </div>
  <br>
</div>

これは私のjsfileです：

var clickBtn = document.querySelector('#buttonBtn');
var field = document.querySelector('#inputCar');
var i = 0;

clickBtn.addEventlistener('click', function(e) {
  var cloneField = field.cloneNode(true);
  cloneField.id = "inputCar" + i++;
  field.parentNode.appentChild(cloneField);
}

よろしくお願いします、マーク