Ajax обновление страницы в реальном времени

Ну вообщем я делаю небольшой проект на джанго и я решил реализовать удобный поиск по какому либо параметру из моей формы. весь js мне писал chatgpt и я вообще в нем не разбираюсь совсем и в общем с "поиском" я работаю впервые. также то что сейчас меня беспокоит: оно по факту ищется но очень криво. все трясется и header дублируется под поиском. мне нужно динамическое обновление страницы при поиске по полям number, VIN, sent_at, status вот что имеем: html:

{% extends 'base.html' %}

{% block title %}
  Для крутых
{% endblock %}

{% block content %}
<div class="container">
    <div class="row mt-3">
        <input type="search" id="search-input" name="q" class="form-control form-control-dark text-bg-dark" placeholder="Поиск..." aria-label="Поиск">

        <div id="applications-list" class="mt-3">
            {% for application in applications %}
                <div class="application-item">
                    <p><strong>Имя:</strong> {{ application.name }}</p>
                    <p><strong>Номер телефона:</strong> {{ application.number }}</p>
                    <p><strong>VIN номер машины:</strong> {{ application.VIN }}</p>
                    <p><strong>Описание проблемы:</strong> {{ application.description }}</p>
                    <img src="{{ application.image.url }}">
                    <p><strong>Отправлено:</strong> {{ application.sent_at }}</p>
                    <p><strong>Статус:</strong> {{ application.status }}</p>
                    <br>
                </div>
            {% endfor %}
        </div>

        {% include 'includes/pagination.html' %}
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function() {
        function searchAndUpdate() {
            let searchQuery = $('#search-input').val();
            $.ajax({
                url: window.location.href,
                data: { q: searchQuery },
                success: function(data) {
                    $('#applications-list').html(data);
                }
            });
        }

        setInterval(searchAndUpdate, 5000);\
    });
</script>
{% endblock %}

python:

class ProProfile(ListView):
    paginate_by = 6
    model = Applications
    template_name = 'pages/proprofile.html'

    def get_queryset(self):
        q = self.request.GET.get('q')
        if q:
            return Applications.objects.filter(
                Q(number__icontains=q) |
                Q(VIN__icontains=q) |
                Q(sent_at__icontains=q) |
                Q(status__icontains=q)
            )
        else:
            return Applications.objects.all()

    def get_context_data(self, **kwargs):
        context = super().get_context_data(**kwargs)
        q = self.request.GET.get('q')
        applications_list = self.get_queryset()  # Используем get_queryset для фильтрации
        paginator = Paginator(applications_list, self.paginate_by)
        page = self.request.GET.get('page')

        try:
            applications = paginator.page(page)
        except PageNotAnInteger:
            applications = paginator.page(1)
        except EmptyPage:
            applications = paginator.page(paginator.num_pages)

        context['q'] = q
        context['applications'] = applications
        return context

{% block title %}
  Для крутых
{% endblock %}

{% block content %}
<div class="container">
    <div class="row mt-3">
        <input type="search" id="search-input" name="q" class="form-control form-control-dark text-bg-dark" placeholder="Поиск..." aria-label="Поиск">

        <div id="applications-list" class="mt-3" style="opacity: 0; transition: opacity 0.3s;">
            {% for application in applications %}
                <div class="application-item">
                    <p><strong>Имя:</strong> {{ application.name }}</p>
                    <p><strong>Номер телефона:</strong> {{ application.number }}</p>
                    <p><strong>VIN номер машины:</strong> {{ application.VIN }}</p>
                    <p><strong>Описание проблемы:</strong> {{ application.description }}</p>
                    <img src="{{ application.image.url }}" alt="Image" class="img-fluid">
                    <p><strong>Отправлено:</strong> {{ application.sent_at }}</p>
                    <p><strong>Статус:</strong> {{ application.status }}</p>
                    <br>
                </div>
            {% empty %}
                <p>Ничего не найдено.</p>
            {% endfor %}
        </div>

{% if applications.has_other_pages or applications %}
    <div id="pagination" style="opacity: 0; transition: opacity 0.3s;">
        {% include 'includes/pagination.html' %}
    </div>
{% endif %}

    </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    function searchAndUpdate() {
        let searchQuery = $('#search-input').val();
        $.ajax({
            url: window.location.href,
            data: { q: searchQuery },
            success: function(data) {
                $('#applications-list').html($(data).find('#applications-list').html());
                $('#pagination').html($(data).find('#pagination').html());

                $('#applications-list').css('opacity', 1);
                $('#pagination').css('opacity', 1);
            }
        });
    }

    $(document).ready(function() {
        $('#search-input').on('input', function() {
            $('#applications-list').css('opacity', 0);
            $('#pagination').css('opacity', 0);
            searchAndUpdate();
        });

        setInterval(function() {
            $('#search-input').trigger('input');
        }, 5000);
    });
</script>
{% endblock %}