how to make checkbox displaying different button when ticked

I have two check boxes, when the user click on the first checkbox it displays the button assigned to the first checkbox, which is fine.

When the user clicks on the second checkbox it displays the button which is supposed to be displayed, however it also displays the first checkbox's button which I want to hide or remove when the second checkbox has been clicked.

<div id="nxtbutton">
    <div id="next-container">
        <a href="/upload-your-artwork/<?php echo $product_sku_upload; ?>" id="nxtBtn" class="btn">Next</a>
    </div>
</div>

<br><br>

<div id="nextbutton">
    <div id="nextbutton-container">
        <a href="http:/create-your-artwork/?php echo $product_sku; ?>" class="btn" id="skuhide">Nexts</a>
    </div>
</div>  


$(document).ready(function(){
    $('#nxtBtn').hide();
    $(' input[type="checkbox"]').on('change', function () { var count = 0;
        $(' input[type="checkbox"]').each(function(){
            if($(this).prop('checked')) {
                count++;
                return;
            }
        })
        if(count > 0) {
            $('#nxtBtn').show();
        } else {
            $('#nxtBtn').hide();
        } 
    });
});

$(document).ready(function(){
    $('#skuhide').hide();
    $(' .coupe_button').click(function () {
        if($(this).prop('checked')){
            $('#skuhide').toggle();
        } else{
            $('#skuhide').hide();
        }
    });

    if($(this).prop('checked')) {
        $('#nxtBtn').hide();
    }
});