Delete Request Records Before Sending a New GET Request Djando

I am building a web app using Django. I am not that familiar with javascript/html since it is not my domain of specialty.

What I am doing is searching for a name that will be looked up in the api and it will return it with other information.

I'll post the codes which I think is realted to my issue. If you need anything more, I can provide it.

views.py

from django.shortcuts import  render
from .models import customer
import requests

def get_customer(request):
    all_customers = {}
    if 'name' in request.GET:
        name = request.GET['name']
        url = 'https://retoolapi.dev/aSIZJV/customer__data?FirstName=%s'%name

        response = requests.get(url)
        data = response.json()
        customers = data

        for i in customers:
            customer_data = customer(
                uid = i['id'],
                f_name = i['FirstName'],
                m_name = i['MiddleName'],
                l_name = i['LastName'],
                phone = i['Phone'],
                email = i['Email'],
                DOB=i['DateOfBirth'],
                EID=i['EmiratesID']

            )
            customer_data.save()
            all_customers = customer.objects.all().order_by('-id')

    return render (request, 'customer.html', { "all_customers": all_customers} )

customer.html

{% extends 'base.html'%}
{% load static %}
{% block content %}

  <div class = "container">
    <div class = "text-center container">
      <br>
      <h2 class = "text-center">Search for the desired customer</h2>
      <br>
      <form method="GET">
        <input type='button' value='Remove Table Body' onclick='removeTableBody()'/>
          
<!--          I am trying to remove the table body using the line above, but it is not working-->
          
          
        <input type = "text" name = "name" placeholder="Search..." class = "text-center"> 
        <button type = "submit" class = "btn-danger btn-sm">SEARCH CUSTOMER</button>
      </form>

    </div>
    <br><br>


    <div class="container">
    <h1>Customer Table</h1>

    <div id="toolbar">
            <select class="form-control">
                    <option value="">Export Basic</option>
                    <option value="all">Export All</option>
                    <option value="selected">Export Selected</option>
            </select>
    </div>

    <table id="table"
                 data-toggle="table"
                 data-search="true"
                 data-filter-control="true"
                 data-show-export="true"
                 data-click-to-select="true"
                 data-toolbar="#toolbar">
        <thead>
            <tr>
                <th data-field="state" data-checkbox="true"></th>
                <th data-field="ID">ID</th>
                <th data-field="FirstName" data-filter-control="input" data-sortable="true">First Name</th>
                <th data-field="MiddleName" data-filter-control="input" data-sortable="true">Middle Name</th>
                <th data-field="LastName" data-filter-control="input" data-sortable="true">Last Name</th>
                <th data-field="Phone" data-filter-control="select" data-sortable="true">Phone</th>
                <th data-field="Email" data-filter-control="select" data-sortable="true">Email</th>
                <th data-field="DateOfBirth" data-filter-control="select" data-sortable="true">Date Of Birth</th>
                <th data-field="EmiratesID" data-filter-control="select" data-sortable="true">EmiratesID</th>
            </tr>
        </thead>
        <tbody>
            {% for customer in all_customers %}
                <tr>
                    <td class="bs-checkbox "><input data-index="0" name="btSelectItem" type="checkbox"></td>
                    <td>{{customer.uid}}</td>
                    <td>{{customer.f_name}}</td>
                    <td>{{customer.m_name}}</td>
                    <td>{{customer.l_name}}</td>
                    <td>{{customer.phone}}</td>
                    <td>{{customer.email}}</td>
                    <td>{{customer.DOB}}</td>
                    <td>{{customer.EID}}</td>
                </tr>
            {% endfor %}

        </tbody>
    </table>
    </div>
  </div>
{% endblock %}
<!-- partial -->

static/website/dist/script.js

var $table = $('#table');
    $(function () {
        $('#toolbar').find('select').change(function () {
            $table.bootstrapTable('refreshOptions', {
                exportDataType: $(this).val()
            });
        });
    })

        var trBoldBlue = $("table");

    $(trBoldBlue).on("click", "tr", function (){
            $(this).toggleClass("bold-blue");
    });


var $table_empty = $('#table');
    $(function removeTableBody() {
        $('#table tbody').empty();
    })
// I wrote the line above to empty the table

When I press the button to empty the rows in the table, I see this on the terminal:

[15/Dec/2021 15:34:05] "GET /style.css HTTP/1.1" 404 2283
[15/Dec/2021 15:34:05] "GET /script.js HTTP/1.1" 404 2283

This a view of how the table looks:

enter image description here

I want to get new responses everytime I send a GET request.