jQuery .click() event not being captured

I was trying to make a play-pause button using jQuery but the mouse click event is not being captured. I am trying to remove and add font-awesome class on each click such that it can change its icon.

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $("#mycarousel").carousel({interval: 2000});
            console.log("document is ready");

            $("#mycarousel").on("click", "#carouselButton", function(e) {
                e.preventDefault(); //added after reading from one of the answers on stackoverflow
                console.log("this is a click!");
                if ($("#carouselButton").children("span").hasClass("fa-pause")) {
                    $("#mycarousel").carousel("pause");
                    $("#carouselButton").children("span").removeClass("fa-pause");
                    $("#carouselButton").children("span").addClass("fa-play");
                }
                else if($("#carouselButton").children("span").hasClass("fa-play")) {
                    $("#mycarousel").carousel("cycle");
                    $("#carouselButton").children("span").removeClass("fa-play");
                    $("#carouselButton").children("span").addClass("fa-pause");  
                } 
                // return false;
            });
        });    
    </script>
</head>

<body>
 <div id="mycarousel">
   .......
  <button type="button" id="carouselButton" class="btn btn-danger btn-sm" >
     <span class="fa fa-pause"></span>
  </button>
 </div>
</body>

At the console I am only getting "document is ready" as output.

I also tried using $("#carouselButton").click(function() {...}); instead of $("#mycarousel").on("click", "#carouselButton", function() {...}); but the button didn't budged at all.

I tested it on edge and chrome after disabling caching on browser. Any body has any suggestions how can I make this work or where am I going wrong?