Django первая часть аккордеона открывается, но не открывается другая в цикле for

Я пытался сделать аккордеон, используя jquery внутри моего кода, но есть проблема, когда я пытаюсь открыть раздел.

Первый вариант работает, а второй нет.

Код находится внутри цикла django for loop.

**HTML : **

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
    
$(function() {  
    $('#accordeon').on('click', function(){ 
        $(this).next().slideToggle(300);
        $('.accordeon-content').not($(this).next()).slideUp(300);
        $(this).toggleClass('active');
        $('#accordeon*').not($(this)).removeClass('active');   
        });
    });

</script>

<div class="consultations">
    <div class="section nosProduits">

        <div class="two-blocks">
            <div class="content">
                <h2>Qu’est-ce que la consultation patrimoniale ?</h2>
                <p>Vous pensez l’expertise sur mesure d’un CGP expert inaccessible ? Pour feter nos 20 ans, nous avons innové pour vous
                    permettre de bénéficier de l’accompagnement d’une équipe de spécialistes du patrimoine sous la forme d’une consultation
                    de 30 minutes à 120 € TTC.
                </p>
            </div>

            <div class="video">
                {% embed 'https://www.youtube.com/watch?v=LqiaOqiLcU4' %}
            </div>
        </div>

        {% for subcategory, products2 in products.items %}
        <div class="head" id="accordeon">
            <h2>{{subcategory}}</h2>
        </div>

        <div class="accordeon-content line" style="display: none;"> 
            {% for product in products2 %}

            <div class="block-consultation">
                <div class="titre">
                    <h3>{{ product.name }}</h3>
                    {% if product.images %}
                    <img src="{{ product.images|first }}" class="categoryImg" alt="Image of {{ product.name }}.">
                    {% endif %}
                </div>
                <div class="content">
                    <div class="description">
                        <p>{{ product.description }}</p>
                    </div>
                    <div class="options">
                        <div class="product">
                            <div>
                                <a href="{% url 'product-purchase' pk=product.djstripe_id %}" class="btn">Souscrire</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
        {% endfor %}
    </div>
</div>

CSS

  background-color: $backgroundcolor;
  background-repeat: no-repeat;
  background-size: cover;

  .two-blocks {
    display: flex;
    padding-bottom: 100px;
    height: 500px;

    .content {
      flex: 1;

      h2 {
        color: #1f3750;
        font-size: 1.5rem;
        text-align: left !important;
        padding-bottom: 10px;
        padding-top: 50px;
      }

      p {
        color: black;
      }
    }

    .video {
      flex: 1;
      padding-left: 100px;
      margin-top: 50px;

      iframe {
        width: 100%;
        height: 100%;
      }
    }
  }


  .head {
    padding: 5px 10px;
    cursor: pointer;
    background: $logincolorbg;
    border-radius: 5px;
    margin-bottom: 20px;
    ;

    h2 {
      font-size: 1.5rem;
      margin-bottom: 0;
    }
  }




  .line {

    padding-top: 40px;
    padding-bottom: 40px;
    gap: 50px;
    display: flex;


    .block-consultation {
      background-color: #fff;
      border-radius: 15px;
      box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
      padding-left: 30px;
      padding-right: 30px;
      padding-top: 20px;
      max-width: 500px;

      .titre {
        text-align: center;

        h3 {
          margin-top: 20px;
          font-size: 1.3em;
          padding-bottom: 10px;
        }

        .categoryImg {
          min-width: 300px;
          max-width: 300px;
          margin-bottom: 10px;
        }
      }

      .content {
        padding-top: 40px;

        .description {
          padding-right: 2%;
          padding-left: 2%;
          padding-bottom: 20px;

          p {
            margin-bottom: 20px;
            text-align: justify;
            font-size: 1rem;
          }
        }
      }

      .options {

        display: flex;
        justify-content: center;
        min-width: 200px;

        .product {
          display: flex;
          flex-direction: row;
          margin-bottom: 30px;

          div {
            display: flex;

            a {
              align-self: flex-start;
              min-width: 180px;
              text-align: center;
              margin: 5px;
            }
          }
        }
      }
    }
  }
}

Я пытался поместить accordeon{{subcategory}} внутри моего ID и моего скрипта, но когда я делаю это, ни один из разделов не открывается.

$(function() {  
    $('#accordeon{{subcategory}}').on('click', function(){ 
        $(this).next().slideToggle(300);
        $('.accordeon-content').not($(this).next()).slideUp(300);
        $(this).toggleClass('active');
        $('#accordeon{{subcategory}}').not($(this)).removeClass('active');   
        });
    });

<div class="head" id="accordeon">
            <h2>{{subcategory}}</h2>
        </div>