Как скрыть некоторое поле на основе forms.select django

Я хочу скрыть некоторые поля, когда пользователь выбирает опцию, но когда я пытаюсь сделать это, это не работает, я не знаю, забыл ли я что-то в моем коде или сделал ошибку, но я пробовал много вещей, и это не работает. В моей модели у меня есть выбор с "IN" и "Out", так что я хочу, чтобы при выборе OUT некоторые поля моей формы были скрыты, в противном случае отображалась вся форма. вот мой model.py

CHOICES = (
("1", "IN"),
("2", "OUT")
)

class addReport(models.Model):
  heure = models.TimeField(auto_now_add=True)
  mouve = models.CharField(max_length=12, choices = CHOICES)
  nom_Visiteur = models.CharField(max_length=26)
  fonction = models.CharField(max_length=26)
  service = models.CharField(max_length=26)
  motif = models.CharField(max_length=26)
  phoneNumber = models.CharField(max_length=12, unique= True)

вот мой forms.py

from django import forms
from .models import addReport
from django.forms import ModelForm
class PostForms(forms.ModelForm):
    class Meta:
    model = addReport
    fields = ('mouve','nom_Visiteur','fonction','service','motif','phoneNumber')


    widgets = {
        'mouve': forms.Select(attrs={'class': 'form-control'}),
        'nom_Visiteur': forms.TextInput(attrs={'class': 'form-control'}),
        'fonction': forms.TextInput(attrs={'class': 'form-control'}),
        'service': forms.TextInput(attrs={'class': 'form-control'}),
        'motif': forms.Textarea(attrs={'class': 'form-control'}),
        'phoneNumber': forms.TextInput(attrs={'class': 'form-control'}),
    }

    def __init__(self, data=None, *args, **kwargs):

        super().__init__(data, *args, **kwargs)

    # If 'later' is chosen, mark send_dt as required.
        if data and data.get('mouve', None) == self.OUT:
            self.fields['fonction'] = forms.HiddenInput(),
            self.fields['service'] = forms.HiddenInput(),
            

вот мой views.py

from django.shortcuts import render
from django.views.generic import TemplateView, ListView
from .models import addReport
from .forms import PostForms
from django.views.generic.edit import CreateView
from django.contrib import messages #import messages
from django.contrib.messages.views import SuccessMessageMixin



class CreateProduct(CreateView, SuccessMessageMixin):
    model = addReport
    template_name = 'home.html'
    form_class = PostForms
    success_url = "."
    success_message = "Votre raport a ete enregistrer"

    def dispatch(self, request, *args, **kwargs):
        self.request = request
        return super().dispatch(request, *args, **kwargs)

    def form_valid(self, form):
        obj = form.save(commit=False)
        obj.save()
        return super().form_valid(form)

и вот мой home.html

 <div class="h-100 ml-5 mr-5 mb-5 align-items-center justify-content-center mt-5" style="width: 30;">
        {% if messages %}
            {% for message in messages %}
                <div class="text-center alert alert-{{ message.tags}}">
                    {{ message|safe }}
                </div>
            {% endfor %}
        {% endif %}
        <div class="p-3 mb-2 bg-light text-black rounded">
            <form method="post" action=" ">
                {% csrf_token %}
                    {{ form|crispy }}

                <br>
                <div>
                    <button class="btn btn-success" type="submit">
                        Enregistrer
                    </button>
                </div>
            </form>
        </div>
   
</div>

Я хочу, чтобы поля fonction, service были скрыты при выборе Out. Спасибо

(function() {
  var mouveSelect = document.querySelector('select[name=mouve]')

  function hideFormElementsIfMouveIsOUT() {
    var shouldHide = mouveSelect.value === 'OUT'
    document.querySelectorAll('[name=fonction], [name=service]')
      .forEach(function(element) {
        element.style.display = shouldHide ? 'none' : null
        element.disabled = shouldHide
        // this logging statement is just for showing what the example does
        console.log((shouldHide ? 'hide' : 'show'), 'element', element)
      })
  }
  mouveSelect.addEventListener('change', hideFormElementsIfMouveIsOUT)
  hideFormElementsIfMouveIsOUT()
})()

<form>
  <select name=mouve>
    <option>IN</option>
    <option>OUT</option>
  </select>
  <select name=fonction>
    <option>A</option>
    <option>B</option>
  </select>
  <input name=service placeholder=service />
  <input name=somethingElse placeholder='something else' />
</form>