Why my JQuery code doesn't want to work while code is properly written

Question

So here I'm having an issue with my carousel. Basically there's a button and based on jQuery code below it should be switching it's sign to play and pause once clicked and should play and pause the carousel, instead it just switches it faster once you click it. Also the timer doesn't work either. Feels like jQuery itself malfunctioning inside the root folder to me.

<div class="container">
        <div class="row row-content">
            <div class="col">
                <div id="mycarousel" class="carousel slide" data-ride="carousel">
                    <div class="carousel-inner" role="listbox">
                        <div class="carousel-item active">
                            <img class="d-block img-fluid" src="img/uthappizza.png" alt="uthapizza">
                            <div class="carousel-caption d-none d-md-block">
                                <h2>Uthappizza <span class="badge badge-danger mr-2">HOT</span><span class="badge badge-pill badge-secondary mr-2">$4.99</span> </h2>
                                <p class="d-none d-sm-block">A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.</p>
                            </div>
                        </div>
                        <div class="carousel-item">
                            <img class="d-block img-fluid" src="img/buffet.png" alt="buffet">
                            <div class="carousel-caption d-none d-md-block">
                                <h2>Weekend Grand Buffet <span class="badge badge-danger mr-2">NEW</span></h2>
                                <p class="d-none d-sm-block">Featuring mouthwatering combinations with a choice of five different salads, six enticing appetizers, six main entrees and five choicest desserts. Free flowing bubbly and soft drinks. All for just $19.99 per person </p>
                            </div>
                        </div>
                        <div class="carousel-item">
                            <img class="d-block img-fluid" src="img/alberto.png" alt="alberto">
                            <div class="carousel-caption d-none d-md-block">
                                <h2>Alberto Somayya</h2>
                                <h4>Executive Chef</h4>
                                <p class="d-none d-sm-block">Award winning three-star Michelin chef with wide International experience having worked closely with whos-who in the culinary world, he specializes in creating mouthwatering Indo-Italian fusion experiences. </p>
                            </div>
                        </div>
                        <ol class="carousel-indicators">
                            <li data-target="#mycarousel" data-slide-to="0" class="active"></li>
                            <li data-target="#mycarousel" data-slide-to="1"></li>
                            <li data-target="#mycarousel" data-slide-to="2"></li>
                        </ol>
                        <a class="carousel-control-prev" href="#mycarousel" role="button" data-slide="prev">
                            <span class="carousel-control-prev-icon"></span>
                        </a>
                        <a class="carousel-control-next" href="#mycarousel" role="button" data-slide="next">
                            <span class="carousel-control-next-icon"></span>
                        </a>
                      <!--  <div class="btn-group" id="carouselButton">
                            <button class="btn btn-danger btn-sm" id="carousel-pause">
                                <span class="fa fa-pause"></span>
                            </button>
                        <button class="btn btn-danger btn-sm" id="carousel-play">
                                <span class="fa fa-play"></span> -->
                        <button class="btn btn-danger btn-sm" id="carouselButton">
                            <span id="carousel-button-icon" class="fa fa-pause"></span>
                        </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

Jquery below here

$(document).ready(function () {
    $('#mycarousel').carousel({ interval: 2000 });
    $('#carouselButton').click(function () {
        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');
        }
        });
    });

Answer 1

Are you clicking a second time before 2 seconds have elapsed? This my cause the class assignment to trip over itself.

Try calling the carousel after the classes have been swapped.

$(document).ready(function () {
    $('#mycarousel').carousel({ interval: 2000 });
    $('#carouselButton').click(function () {
        if ($('#carouselButton').children('span').hasClass('fa-pause')){
          $('#carouselButton').children('span').removeClass('fa-pause');
          $('#carouselButton').children('span').addClass('fa-play');
          $('#mycarousel').carousel('pause');
        }
        else if ($('#carouselButton').children('span').hasClass('fa-play')) {
          $('#carouselButton').children('span').removeClass('fa-play');
          $('#carouselButton').children('span').addClass('fa-pause');
          $('#mycarousel').carousel('cycle');
        }
        });
    });