Bootstrap confirmation is not working inside onClick event?

Question

I have a button & I want to add bootstrap confirmation this is working fine when I'm calling directly but When I'm using confirmation code inside onClick Event this then Bootsrap Confirmation is not working. What is wrong here?

This is my code:-

$('.myButton').on("click", function() {
  $('[data-toggle=confirmation]').confirmation({
    rootSelector: '[data-toggle=confirmation]'
});
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-confirmation2/4.2.1/bootstrap-confirmation.min.js" integrity="sha512-LhgCuBuvISlfR3iVmjgchM6JrYvl16h/RJVsjdCfGXUahMHgmMJpavyIbluTuV3Ww8tJtGh2VAYayfoGvc84DA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<button data-toggle="confirmation" type="button" class="myButton mt-5 btn btn-primary btn-convert">Convert</button>

ThankYou!