Spinner shows first time on button press, however fails to show when button is pressed second time?

Question

I am trying to show a 'loading' spinner when a button is pressed. So essentially when the page is loaded the first time, the spinner is hidden. When the user fills the form and presses the button, the 'loading' spinner is shown and a post request is sent to the backend server. After the server sends the response back, the spinner is hidden again as the page is reloaded, with the response from the POST request. This works as intended. However, now the problem part comes. If the user again fills out the form and hits the button, everything happens like before, however, this time the 'loading' spinner doesn't show up.

Here is the jquery:

$(document).ready(function()
{
    console.log('ready');

    // Hide spinner on document load

    $("#spinner").hide();

    $("#answer").css({
        display: "block",
        visibility: "visible"
        });
        
    // When form submit button is clicked check the form is valid. If form is valid show spinner.
    $('#button-question').click( function(){
        if ( $('#form-question')[0].checkValidity() ){

            $("#answer").css({
                display: "none",
                visibility: "hidden"
                });
            

            $("#wiki-spinner").show();

            
        }
    });  
    
})

The relevant html elements are shown below:

<form action="{% url 'xyz' %}" method="POST" enctype="multipart/form-data" class="form-horizontal" id="form-question">
    {% csrf_token %}
    <div class="form-group">
        <label for="name" class="control-label">Question</label>
        <input type="text" class="form-control" id="question" name="question" aria-describedby="wikiHelp" placeholder="{{question}}" value="{{question}}" required>
        <small id="wikiHelp" class="form-text text-muted small-text">Questions should be relevant to the article. </small>
    </div>

    <div class="form-group">                    
        <div class="col-md-6 col-sm-6 col-xs-12 col-md-offset-3" style="margin-bottom:10px;">
            <button class="btn btn-success" id="button-question"> <span class="glyphicon glyphicon-upload" style="margin-right:5px;"></span>Ask Question</button>
        </div> 
    </div>
</form>
<!-- {% if show_wiki_spinner %} -->
<div class = "row justify-content-center h-100 w-100" id="spinner">
    <div class = "row justify-content-center h-100 w-100 d-table">
        <div class = "col w-100 text-center d-table-cell align-middle">
            <h1 class = "spinner-font">Loading!</h1>
            <div class="spinner-border text-success" role="status">
            </div>
        </div>
    </div>
</div>
<!-- {% endif %} -->
<div class="answer" id="answer">
</div>

Answer 1

I found the answer. I was using Django templating with jinja2. Even after commenting out the jinja2 variables still work, which was hiding the spinner after the POST request reload.