Jquery Why do buttons dynamically created after append method not work with the click function

Question

The appended buttons dynamically created don't trigger the alert function and secondly I wanted the add button when I add a button the data id increases but it doesn't seem to work :(

$(document).ready(function() {

  $(".addBtn").click(function() {
    var id = $("#mainDiv").attr("data-id");
    console.log(id);

    id++;

    $("#mainDiv").append("<input type='button' data-id = '" + id + "' value='TEST " + id + "' class='btn'/><br><br>");
  });

  $(".btn").click(function() {
    alert("hello world!");
  });

  $(".rmvBtn").click(function() {
    //                   $(".btn").remove();
    $("#mainDiv").html("");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<input type="button" value="Remove Buttons" class="rmvBtn" /><br><br><br><br>

<input type="button" value="Add Buttons" class="addBtn" /><br><br><br><br>
<div id="mainDiv">
  <input data-id="1" type="button" value="TEST" class="btn" />
  <input data-id="2" type="button" value="TEST 1" class="btn" />
</div>