Problem when clicking button again in javascript

I have a comment page that has a reply and cancel reply button. Using the following code when the reply button is clicked the cancel reply button will appear instead. There is only one problem, when the reply button of one comment is clicked, without clicking the cancel reply button of that comment I click the reply button of another comment, the reply button of the previous comment disappears. My level of knowledge of JavaScript is low. The code above solves all my needs, there is only one problem that I said, the code should be edited so that it does not destroy my other needs.

<script>
    jQuery( function( $ ){
        $( '.comment-reply-link' ).on( 'click', function(){
            var commentContainer = $(this).closest('.comment_container');
            commentContainer.find('.comment-reply-link').hide();
            $( '#cancel-comment-reply-link' ).insertAfter( this ).show();
        } );
        $( '#cancel-comment-reply-link' ).on( 'click', function(){
            var commentContainer = $(this).closest('.comment_container');
            commentContainer.find('#cancel-comment-reply-link').insertAfter(this).hide();
            commentContainer.find('.comment-reply-link').show();
        } );
    } );
</script>