Moving cards between active and available states

Question

I'm relatively new to jQuery, so there may be a simple solution to this, but I've yet to find it! I have 2 sets of cards to distinguish when a particular item is 'active' or 'available'. When a stop button on an 'active' card is clicked, it becomes 'available' and moves to the 'available' div, and vice versa.

So far, I've been able to update the cards from one state to another - 'active' to 'available', or 'available' to 'active' and move them to the correct div using the 'appendTo' function, but after they move for the first time, I can't seem to them back.

I've tried updating their classes, after they're moved but this doesn't seem to work. Maybe I need to nest my functions inside each other? I've included my code below if anyone has any ideas?...

$('.activeBtn').click(function() {
    $(this).removeClass('btn btn-sm btn-danger activeBtn mt-2');
    $(this).addClass('btn btn-sm btn-success availBtn mt-2');
    $(this).text('Start');
    $('.card-text').text('AVAILABLE');
    $(this).attr("id","availBtn");
    $(".cardActive").appendTo("#availDiv"); 
});


$('.availBtn').click(function() {
    $(this).removeClass('btn btn-sm btn-success availBtn mt-2');
    $(this).addClass('btn btn-sm btn-danger activeBtn mt-2');
    $(this).text('Stop');
    $('.card-text').text('ACTIVE');
    $(".cardAvail").appendTo("#activeDiv");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>


<div class="container-fluid" id="main">
    <div id="activeDiv" style = "border:3px solid red; height: 250px;">
    <p>Active Cards</p>
        <div class="card cardActive"> 
            <div class="card-body text-center">
                <p class="card-text"><small class="text-muted">ACTIVE</small></p>
                <a href="#" class="btn btn-sm btn-danger activeBtn mt-2">Stop</a>
            </div>
        </div>
    </div>

    <br><hr><br><br><hr><br>

    <div id="availDiv" style = "border:3px solid green; height: 250px">
      <p>Available Cards</p>
        <div class="card cardAvail">
            <div class="card-body text-center">
                <p class="card-text"><small class="text muted">AVAILABLE</small></p>
                <a href="#" class="btn btn-sm btn-success availBtn mt-2">Start 1</a>
            </div>
        </div>
    </div>
</div>