jQuery. Дубликаты значений

Трудность в следующем: берется шаблон (тег template) из html файла. При нажатии по кнопке создается разметка из шаблона в html файле, на котором навешивается событие в input. Если добавить к примеру три карточки и в самой верхней карточке в поле вести любое значение, то это значение будет добавлено в три карточки, а у меня трудность в том, что надо сделать, чтобы в каждой карточки было индивидуальное значение и не дублировалось в другие карточки.

Спасибо.

шаблон

<template id="templateCard">
  <div class='wrapper'>
    <div class="card">
      <div class='title'><h1></h1></div>
      <div class='inp'><input id="target" type="text"></div>
      <div class='listItems'>
        <ul></ul>
      </div>
    </div>
  </div>
</template>

JS код

$('body').on('click', '#newCard', function(e) {
    console.log('check')
    let copyTemp = $($('#templateCard').prop("content")).clone();
    copyTemp.find('h1').text('New Card').append('<span class="removeCard"> X</span>');
    copyTemp.find('ul').append('<li>One task</li><li>Two task</li><li>Three task</li>')
    $('#container').append(copyTemp.find('.wrapper').html());
    // closeCard(); // события закрытия карточки
    addTask(); // добавить задачу
});
// события добавления задач
function addTask() {
    $('.card').on('keypress', '#target', function (e){
        if (e.which === 13) {
            let task = $(this).val();
            $(this).val('');
            $('ul').append('<li>' + task + '</li>');
            console.log($(this));
        }
    })
}