jqueryのclickで追加した要素にafterを使いたい

Question

下記のように、clickをするときに無い要素にafterやappendが効かないようで、いろいろ調べましたがhttps://qiita.com/ayies128/items/5d044bc08b9308767f4c　このような追加した要素にクリックイベントをつける内容しか見つかりませんでした。
今回悩んでいる所はそれとは少し、違い、clickするときに追加される要素にafterが使いたいという所です。

<button id="btn">ボタン</button>
<div class="box"></div>

<script>
jQuery(function ($) {
  $('.box').html('<div id="item"></div>');
});
</script>

<script>
jQuery(function ($) {
  $('#btn').on('click',function () {

    $('#item').after('表示させる内容');
    
  });
});
</script>

Answer 1

こういうことですか？

<script>
$(function(){
  $('#btn').on('click',function(e){
    e.preventDefault();
    $('.box').html('<div id="item1">hoge1</div>');
    $('.box').append($('<div id="item2">hoge2</div>'));
    $(this).after($('<div id="item3">hoge3</div>'));
  });
});
</script>
<button id="btn">ボタン</button>
<div class="box"></div>

一応buttonがサブミットする可能性があるのでイベントを殺してあります

Answer 2

書いたとおりで問題なく動くようです。

CodePenで実装してみた例