[Django] Hide button in javascript

My script.js

window.onload = initall;
var  saveBookButton ;
function initall() {
    saveBookButton.onclick = save_ans;
function save_ans() {
    var ans = $("input:radio[name=name]:checked").val()
    // alert("Your answer has been submitted")
    var url = '/save_ans?ans='+ans
    var req = new XMLHttpRequest();
    req.onreadystatechange = function() {
    // if (this.readyState == 4 && this.status == 200) {
    // //  alert(req.responseText)
    // }
// When the button is clicked the button is not hiding!
// I am doing this so that, the user can't click the button again and again and break my code, I also want to know the best practices, so that,  I don't need to do this(Hide the button) at all.
  saveans =   document.getElementById("save_ans");
    saveans.style.visibility = 'hidden';
    console.log("ATLEAST GOT HERE!")
  req.open("GET", url, true);
// console.log("Loaded")

My quiz.html

  <!DOCTYPE html>
            <html lang="en">
                <meta charset="UTF-8">
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <title>GuruTheCoder quizz app</title>
                {% load static %}
                <link rel="stylesheet" href="{% static 'style.css' %}">
                <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
                <script src="{% static 'script.js' %}">
                <center><h1>Question {{ questions.end_index }} of  {{count}}</h1></center>
                <div class="col-lg-8 border border-success p-4 m-4 mx-auto">
                            {% for i in questions%}
                                <div class="radio">
                                <label><input type="radio" name="name"  id="option1" value="{{i.option1}}">{{i.option1}} </label> 
                                <div class="radio">
                                <label > <input type="radio" name="name"  id="option2" value="{{i.option2}}">{{i.option2}}</label>
                              <div class="radio">
                                <label ><input type="radio" name="name" id="option3" value="{{i.option3}}">{{i.option3}}</label>
                                <div class="radio">
                                <label ><input type="radio" name="name"  id="option4" value="{{i.option4}}">{{i.option4}} </label>
                            <div class="form-group">
                                <button class="btn  btn-success" id="save_ans">Select Answer</button>
                            <div class="paginetor">
                              <div class="form-group">
                              {% if questions.has_previous %}
                                <a href="?page={{ questions.previous_page_number }}"><button class="btn form-control btn-primary" id="back">Back</button></a>
                              {% endif %}
                                {%  if questions.has_next %}
                                <a href="?page={{ questions.next_page_number }}"><button class="btn form-control btn-primary" id="submitAnswer">Next</button></a>
                              {% else %}
                               <a href="/result/"><button class="btn form-control btn-success">Submit Quiz</button></a>  
                              {% endif %} 

                <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
                <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
                <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>    

My views.py file

from django.shortcuts import render
from . models import Question
# Create your views here.
from django.core.paginator import Paginator
lst = []
answers = Question.objects.all()
anslist = []
for i in answers:
def welcome(request):
    return render(request, 'welcome.html')
def quiz(request):
    obj = Question.objects.all()
    count = Question.objects.all().count()
    paginator = Paginator(obj,1)
        page = int(request.GET.get('page','1'))  
        page =1
        questions = paginator.page(page)

    return render(request,'quiz.html',{'obj':obj,'questions':questions,'count':count})
def result(request):
    score = 0
    for i in range(len(lst)):
        if lst[i]==anslist[i]:
            score +=1
    return render(request,'result.html',{'score':score,'lst':lst})

def saveans(request):
    ans = request.GET['ans']
    # print(ans)

If other files are needed, I’ll add them as well.
I am using Django.

what’s your question for this code?

How can I hide the button(save_ans button).
Or is there an other method by which I can do this in my views.py file(best practice)

I have commented it in the code in the right place.
I’m really new to this topic.

Any idea of what I can do.
I am REALLY confused

Maybe make a dictionary can be used

Hello there!
Do I need to give more info