Создание нескольких вещей при нажатии

Question

$('#add').click(function () {
                $('#taskCont').append('<div class="task"></div>');
                $('.task').append('<input type="checkbox">', '<div></div>', '<small>Delete</small>');
                
            });

.task{
  width : 200px;
  height : 50px;
  background: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p id="add">add</p>
<div id="taskCont"></div>

Нажмите кнопку добавления несколько раз. Как мне избавиться от этой проблемы?

Answer 1

Вы хотите добавить только к последней задаче?

$('.task:last-of-type').append(

Answer 2

Вы добавляете к .task каждый раз, что выбирает больше div по мере их добавления. Вместо этого каждый раз создавайте переменную и добавляйте ее.

$('#add').click(function() {
  let task = $('<div class="task"></div>')
  task.append('<input type="checkbox">', '<div></div>', '<small>Delete</small>')
  $('#taskCont').append(task)
});

.task {
  width: 200px;
  height: 50px;
  background: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p id="add">add</p>
<div id="taskCont"></div>