hiding submit button using jquery function not working?

I have created a django crispy form. I want to hide the submit button until every field has been entered i found some solution using jQuery but it is not showing the submit button after entering every field, i need your help to proceed further.

I have added two images,
before hiding submit button and trying jquery,
form without hiding the submit button

after trying jquery the submit button is not visible even after entering every field.
and another screenshot after trying.

below are my codes for respective files,

forms.py

class AppForm(forms.ModelForm):
    
        class Meta:
            model = App
            fields = ('__all__')

        def __init__(self, *args, **kwargs):
            super(AppForm, self).__init__(*args, **kwargs)
            self.helper = FormHelper()
            self.helper.form_show_labels = False

            defualt_image_path = '/media/photo.png'
            self.fields['appicon'].widget.attrs['placeholder'] = defualt_image_path
            self.fields['appicon'].widget.attrs['classs']= 'appicon-field'
            self.fields['appname'].widget.attrs.update({'placeholder': 'Apps Name', 'class':'appname-field'})
            self.fields['link'].widget.attrs.update({'placeholder':'App Link','class':'link-field'})
            self.fields['category'].widget.attrs.update({'placeholder':'App Category', 'class': 'catg-field'})
            self.fields['subcategory'].widget.attrs.update({'placeholder':'Sub Category', 'class': 'subcatg-field'})
            self.fields['points'].widget.attrs.update({'placeholder':'ADD POINTS', 'class': 'points-field'})

html file, (submit button)

<div class="submit-div">
     <button type="submit" class="submitform-button" id="submitform-button">Submit</button> 
</div>

html file, script part

$(document).ready(function() {
    // Function to check if all fields are filled
        function checkFields() {
            var imageInput = $('.appicon-field')[0].files.length > 0;
            var charInput1 = $('.appname-field').val().trim() !== '';
            var charInput2 = $('.link-field').val().trim() !== '';
            var charInput3 = $('.catg-field').val().trim() !== '';
            var charInput4 = $('.subcatg-field').val().trim() !== '';
            var charInput5 = $('.points-field').val().trim() !== '';

            // Show/hide submit button based on input status
            document.querySelector('.submitform-button').style.display = imageInput && charInput1 && charInput2 && charInput3 && charInput4 && charInput5 ? 'inline-block' : 'none';
        }

        // Trigger checkFields on input change
        $('.appicon-field, .appname-field, .link field, .catg-field, .subcatg-field, .points-field').on('change', function() {
            checkFields();
        });

        // Initial check on page load
        checkFields();
    });

style.css, (submit button css)

.submitform-button{
    display: none;
    padding: 10px 75px;
    cursor: pointer;
    font-weight: bold;
    text-align: center;
    text-decoration: none;

    background-color: #f3c19d;
    color: #293845;
    border: 2px solid #ec975b;
}

base.html,(cdn link)

<head>
 ...
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>

please comment if you need anything else from my side.