Клонирование элементов с помощью 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);
}

Заранее спасибо, отметьте