Проблема при повторном нажатии кнопки в javascript

Я думаю, это потому, что вы используете идентификатор '#cancel-comment-reply-link'
Попробуйте вместо того, чтобы отменять идентификатор, как

<div id = "cancel-comment-reply-link"></div>

К

<div class = "cancel-comment-reply-link"></div>

Потому что идентификатор уникален для DOMelement согласно MDN.Mozilla

И измените скрипт на:

<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>

Если я правильно понял, проблема, с которой вы столкнулись, заключается в следующем:

1. Пользователь нажимает кнопку «Ответить».
2. Затем пользователь нажимает другую кнопку «Ответить».
3. Первая нажатая кнопка «Ответить» больше не видна

Если это так, проблема заключается в том, что вы не «отображаете» первую нажатую кнопку «Ответить» (на шаге 1), когда вы нажимаете вторую кнопку «Ответить» на шаге 2.

$('.comment-reply-link' ).on( 'click', function(){
    // HERE - CHECK TO SEE IF A REPLY BUTTON WAS CLICKED BEFORE!
    // IS IT STILL HIDDEN?
        // YES -> UNHIDE
        // NO -> CONTINUE

    var commentContainer = $(this).closest('.comment_container');
    commentContainer.find('.comment-reply-link').hide();
    $( '#cancel-comment-reply-link' ).insertAfter( this ).show();
});

Есть несколько способов исправить это. Один из быстрых способов — просто показать .comment-reply-link перед тем, как вызвать $( '#cancel-comment-reply-link' ).insertAfter( this ).show();.

Что-то вроде:

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

Другими способами являются применение некоторого «состояния» к элементу ответа (класс, атрибут данных) и запрос его (чтобы показать, когда вы нажмете другой ответ позже).

С помощью Джека и Existentia я смог решить свою проблему после нескольких дней усилий.

<script>
    jQuery( function( $ ){
        var replyClicked = false;
        $( '.comment-reply-link' ).on( 'click', function(){
        var commentContainer = $(this).closest('.comment_container');
        if ( ! replyClicked && $('.comment-reply-link').is(":visible") ) {
            commentContainer.find('.comment-reply-link').hide();
            replyClicked = true;
        } else {
            $('#cancel-comment-reply-link').parent().find('.comment-reply-link').show();
            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>