AJAX “loading” animation not replacing submit button

[nmeri17]

I have an animation div that should replace the submit button after the button has been clicked and the animation should last for the duration spanning when the form is submitted and a response gotten. Then the animation should be replaced again and another submit button replacing it. Unfortunately, the animation fails to replace the submit button and instead, another submit button is thrown into the form. Below contains the relevant portions of my code:

var  error = false;
function buttonFunc (e){
var anim = $("#floatingCirclesG"), typedText = $("#new-comment textarea").val();
    e.preventDefault();

    if ($(that).val().split(" ").length > 3) {
        while(!loadingComment()) {
            $(anim).removeClass('hide-anim');
            $(this).replaceWith($(anim));
        }
    }

    else alert("comment too vague");

    // If comment was not posted, Bring back comment text
    if (error) {
        $('#new-comment textarea').val(typedText);
    }
}

function loadingComment () {
var typedText = $("#new-comment textarea").val(), submit = document.createElement('INPUT'), anim = $('#floatingCirclesG');
submit = $(submit).attr('value',"comment").attr("type", "submit");

if (typedText.split(" ").length > 3) {
if ($.post('make_new_comment.php', {new_comment: typedText, parent_post: thisPost}, function (e) {
    var update = document.createElement('DIV');
    update = $(e).load(update);
    $('#comments h3').html(parseInt($('#comments h3').html(), 10) + 1 + " Responses");
    $('#comments').append($(update));
    var lastId = $(update).attr("id");

    setTimeout(function() {
        window.location.href = window.location.href.indexOf("#") == -1 ? window.location.href + "#" + lastId: window.location.href.substring(0, window.location.href.indexOf("#")) + "#" + lastId;
        }, 2500);
    })) {

    // empty comment box if comment was successfully submitted and hide animation
    $('#new-comment textarea').val("");
    $(anim).replaceWith(submit).addClass("hide-anim");
    return true;
    }
    error = true;
return false;
}
else $("input[type='submit']", "#new-comment").attr('disabled', 'disabled');
  }

$("textarea").on("focus", function(){
var that = $(this), submitButton = $(that).parent().children("input[type='submit']");
submitButton.attr('disabled', 'disabled');
$(that).on('input', function() {
    if ($(that).val().split(" ").length > 3) {
        $(submitButton).removeAttr('disabled');
    }
});
submitButton.css("margin-top", 0).parent().get(0).delegate("input[type='submit']", "click", buttonFunc(e));
});

The entire snippet above is not wholly relevant to the problem at hand but I understand a reader might need where what variable is coming from. But, the crux lies here

//The animation should only last for as long the form is not submitted and a response retrieved.
        while(!loadingComment()) {
            $(anim).removeClass('hide-anim');
            $(this).replaceWith($(anim));
        }