Вложенный, свертываемый флажок внутри выпадающего списка с Dynami c data-target?

Question

Используя Bootstrap 4, я пытаюсь добиться этой структуры внутри раскрывающегося списка

[] Level 1
  [] Level 2
    [] Level 3

, где элементы являются входами для флажков и являются складными, Вот минимальный рабочий пример того, что я пытаюсь выполнить sh:

<div class="dropdown">
  <button id="dropdownButton' class='btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">
    Dropdown
  </button>
  <form class="dropdown-menu">
    <ul id="level-1">
      <li class="dropdown-item">
        <label data-toggle="collapse" data-target="#level-2">
          <input type="checkbox"> Level 1
        </label>
        <ul id="level-2" class="collapse">
          <li class="dropdown-item">
            <label data-toggle="collapse" data-target="#level-3">
              <input type="checkbox"> Level 2
            </label>
            <ul id="level-3" class="collapse">
              <li class="dropdown-item">
                <label>
                  <input type="checkbox"> Level 3
                </label>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </form>
</div>

Я использую form, чтобы предотвратить закрытие раскрывающегося списка при нажатии на ярлык. Кажется, проблема в том, что значения data-target и / или id являются динамическими c (передается через контекст flask).

Например:

<form class='dropdown-menu' aria-labelledby='{{ id }}' {% include 'fields/attrs.html' %}>
  <ul id='level-1-{{ id }}'>
    {% for title in dropdown_menu_items.values() %}
      <li class='dropdown-item'>
        <label class='form-check-label' data-toggle='collapse' data-target='#level-2-{{ id }}-{{ loop.index }}'>
          <input class='form-check-input' {% if title.provider_title_id %}name='{{ name }}'{% endif %} type="checkbox" {% if title.provider_title_id %}value='{{ title.provider_title_id }}'{% endif %} {% if title.checked %}checked='checked'{% endif %} />{{ title.title }}
        </label>
        <ul id='level-2-{{ id }}-{{ loop.index }}' class='collapse'>
...

Я проверил, чтобы убедиться, что он "работает" со значениями stati c, такими как level-2 и level-3, и работает. Есть ли способ обойти это или я просто упускаю что-то очевидное?

TL; DR - расширение / сворачивание не работает при назначении id и data-target через контекст flask; виден только элемент level-1.