Q: Click event not working when using font awesome inside A Tag I have A tag which have font awesome inside it. Sometimes it doesnt work when I use the font awesome icon, and need to try this until 3 or 4 times to make it works. What should I do?
$(".confirm-delete").click(function(e) {
  e.preventDefault();
  let id = e.target.dataset.id;
  Swal.fire({
    title: 'Perhatian!',
    text: "Apakah Anda yakin untuk menghapus pengisi jabatan ini?",
    icon: 'warning',
    showCancelButton: true,
    confirmButtonColor: '#3085d6',
    cancelButtonColor: '#d33',
    confirmButtonText: 'Ya, hapus',
    cancelButtonText: 'Tidak'
  }).then((result) => {
    if (result.isConfirmed) {
      $(`#delete${id}`).submit();
    }
  })
});

<a href="#" data-id="{{ $servant->id }}" class="btn btn-danger btn-sm confirm-delete">
   <form action="{{ route('position.delete', ['congregationId' => $servant->id]) }}" method="post" class="d-inline" id="delete{{ $servant->id }}">
      @csrf
      @method('delete')
   </form>
   <i class="fas fa-trash"></i>
</a>


A: You need to address your way to the container element
In jQuery use $(this)
but I do not like the form inside your link


$(".confirm-delete").on("click", function(e) {
  e.preventDefault();
  console.log($(this).data("id"));
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#" data-id="ID" class="btn btn-danger btn-sm confirm-delete">
  <form action="" method="post" class="d-inline" id="deleteX">
  </form>Something else 
  <i class="fas fa-trash">X</i>
</a>


In plain JS use currentTarget to get the element the eventhandler is assigned to


$(".confirm-delete").on("click", function(e) {
  const tgt = e.target; // A or I depending. I if you click I
  const link = tgt.closest("a"); // Always A if clicking inside the link
  const curr = e.currentTarget; // The A since that is where we have the .on
  const id = e.currentTarget.dataset.id; // the ID from the link
  e.preventDefault();
  console.log(tgt.tagName, link.tagName, curr.tagName, id);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#" data-id="ID" class="btn btn-danger btn-sm confirm-delete">
  <form action="" method="post" class="d-inline" id="deleteX">
  </form>Something else
  <i class="fas fa-trash">X</i>
</a>



A: You can use currentTarget to get the element the event was bound to.
const id = e.currentTarget.dataset.id; // should be const because you don't reassign it.


A: I don't like the way you have a form inside your anchor - if you have inputs being rendered inside the form, then your html will be invalid and can cause some issues with how the browser renders it
Instead of having an anchor that you tie your event to, why not just use a button inside your form and if the result is not confirmed, prevent the default action:
Change html:
<form action="{{ route('position.delete', ['congregationId' => $servant->id]) }}" method="post" class="d-inline" id="delete{{ $servant->id }}">
  @csrf @method('delete')
  <button class="confirm-delete"><i class="fas fa-trash"></i></button>
</form>

And prevent the default action of the button if the result is not confirmed:
$(".confirm-delete").click(function(e) {
  Swal.fire({
    title: 'Perhatian!',
    text: "Apakah Anda yakin untuk menghapus pengisi jabatan ini?",
    icon: 'warning',
    showCancelButton: true,
    confirmButtonColor: '#3085d6',
    cancelButtonColor: '#d33',
    confirmButtonText: 'Ya, hapus',
    cancelButtonText: 'Tidak'
  }).then((result) => {
    if (!result.isConfirmed) {
      e.preventDefault();  // prevent default action if not confirmed
    }
  })
});

By doing it this way it is more accessible too as your form will work (without the confirmation) even if javascript is disabled
