Dynamically loaded Foundation for Sites Accordion Menu in a Django template duplicates list entries

Question

I've run into an issue with a dynamically loaded accordion menu rendered in a Django template. The accordion menu is loaded in a Django template like this:

  <ul id=accordion class="vertical menu accordion-menu" data-accordion-menu data-multi-open="false">
    {% for k in tree %}
    {% include "sub-template.html" with dict=k%}
    {% endfor %}
  </ul>

sub-template.html looks like this:

{% if 'key' in dict.1 and dict.1.key|length > 0 %}
<ul class="menu vertical nested" data-multi-open="false">
     <li>
          <a href='#' name="{{dict.1.path}}" id="{{dict.1.path}}" data-term="{{dict.1.key}}" draggable=true
               ondragstart="drag(event, '{{ dict.1.path }}', '{{ dict.1.key }}')" class=value>{{dict.1.key}}
               {% for item in dict.1.items %}
               {%include "sub-template.html" with dict=item%}              
          </a>
          {% endfor %}
     </li>
</ul>
{% endif %}

sub-template.html recursively renders list items from 'tree,' an array of nested JSON objects, each object with a "path" and "key" attribute:

[
    [
        'AAD', {
            'AAA': {
               'AAA': {
                  'AAA': {
                     'key': 'some value for path AAD_AAA_AAA_AAA',
                     'path': 'AAD_AAA_AAA_AAA'
                  },
                  'AAB': {
                     'key': 'some value for path AAD_AAA_AAA_AAB',
                     'path': 'AAD_AAA_AAA_AAB'
                  },
               'key': 'some value for path AAD_AAA_AAA',
               'path': 'AAD_AAA_AAA'
               },
               'AAB': {
                  'AAA': {
                     'key': 'some value for path AAD_AAA_AAB_AAA',
                     'path': 'AAD_AAA_AAB_AAA'
                   },
               'key': 'some value for path AAD_AAA_AAB',
               'path': 'AAD_AAA_AAB'
               },
            'key': 'some value for path AAD_AAA',
            'path': 'AAD_AAA'
        },
...

The problem is that with exception of the very top menu items (the first li items), the a element of all following li elements are rendered in duplicate deeper into the menu tree. This results in 1) unnecessary rendering (overhead/loading times etc.) and 2) in additional li options with dropdown arrows that are not sub-menu option.

For example:

<ul id=accordion>
   <ul>
       <li>
            <a>AAD
                <ul>
                    <a>AAD <-- This should not be here
                        <li>AAD_AAA
                            <a>AAD <-- This should not be here
                            <a>AAD_AAA
                            <ul>
                                <a>AAD_AAA <- This should not be here
                                    <li>AAD_AAA_AAA
                                        <a>AAD_AAA <-- This should not be here
                                        <a>AAD_AAA_AAA
                                            <ul>
                                                <a>AAD_AAA_AAA <-- This should not be here
                                                    <li>
                                                        <a>AAD_AAA_AAA <- This should not be here
                                                        <a>AAD_AAA_AAA_AAA
...

I suspect the issue is in the recursive rendering template since the first list items are rendered correctly and then the pattern repeats itself: for every ul, a, li, a, a the second and third a elements are wrong.

Does anybody see what the issue might be with the recursive template or perhaps propose a different recursive structure?

EDIT: would some if-statements in the sub-template be suitable to remedy the issue? If so, what would that look like? My Django template language skills are not yet at the point where I'd be likely to figure that out myself.

Please note that the tree is quite large, cannot be modified easily and the depth of the tree is variable (hence the recursive rendering).