ajax で受け取った部品を追加し、そのボタンも動かす

  // ① ボタンを押したら data.php に番号を送り、返ってきた HTML を追加する
  $('#post').on('click', function(){
    num = num + 1;
    $.ajax({
      url: 'data.php',
      type: 'POST',
      data: { num: num },
      dataType: 'html'
    }).done(function(data){
      $('#add').append(data);
    });
  });

<?php
/*
 * ajax で呼ばれるファイル
 * 送られてきた番号 num を受け取り、追加する部品（HTML）を返します。
 */
$num = (int)($_POST['num'] ?? 0);   // 数字以外が送られても安全なように整数にする
?>
<div class="item" id="item-<?= $num ?>">
  <span class="item__no"><?= $num ?>個目</span>
  <button type="button" class="btn hello">あいさつ</button>
  <button type="button" class="btn del">削除</button>
  <span class="item__msg"></span>
</div>

  // ② あとから追加された部品のボタンにも効くよう、親の #add にイベントを登録する
  $('#add').on('click', 'button.del', function(){
    $(this).closest('.item').remove();
  }).on('click', 'button.hello', function(){
    $(this).siblings('.item__msg').text('こんにちは！');
  });