Can not run function on javascript button

Question

I have a button that responds to javascript function as:

<button type="button"  id="sa-warning">Click me</button>

 <script>
document.getElementById("sa-warning").addEventListener("click",function()
   {
       Swal.fire
       ({
           title:"Are you sure?",
           text:"This will inactivate the advertiser!",
           icon:"warning",showCancelButton:!0,
           confirmButtonColor:"#2ab57d",
           cancelButtonColor:"#fd625e",
           confirmButtonText:"Yes, delete it!"
       })
           .then(function(e){e.value&&Swal.fire("Deleted!","Your file has been deleted.","success")
   })})

 </script>

It works perfectly, when I click the button it opens a modal, etc. But now I need to create that button using jQuery as:

  $(this).find(".btn-group")
  .append("<button type='button' class='btn btn-light btn-sm dropdown-toggle' data-bs-toggle='dropdown' aria-expanded='false'>Actions<i class='mdi mdi-chevron-down'></i></button>
<ul class='dropdown-menu dropdown-menu-end'>
<li>
<button id='sa-warning' class='dropdown-item text-danger' type='button'>Mark Inactive</button>
</li>
</ul>");

As you can see I have exactly the same button, but it is inside a dropdown button and when I click it just does not respond, what am I doing wrong?