Динамический запрос выборки с динамическим Jinja HTML

Question

У меня есть формы, которые отображаются динамически на основе значений в словаре. Им присваивается идентификатор на основе значения ключа. Все они изначально скрыты.

<div id="subforms" style="display: none" >
  {%for k, v in options.items() %}
    <h3>{{k}}:</h3> 
    <form id= "{{k}}">
    {% for option in v %}
      <label>{{option}}</label>
      <input type="checkbox" name="{{option}}_enabled">
    {% endfor %}
    </form>
  {% endfor %}
</div>

Теперь я создаю список ввода с теми же клавишами:

<form action="/action_page.php">
  <input list="tables" id="tablelist" >
    <datalist id="tables">
    {% for key in options.keys() %}
      <option value={{key}}>
    {% endfor %}
    </datalist>
</form>

Последнее, у меня есть Javascript, используемый для прослушивания элемента tablelist и выбора формы на основе значения inputlist.

const tables = document.getElementById("tablelist")
const subform_block = document.getElementById("subform_display")
const forms = document.getElementById("subforms")

tables.oninput = () => {
  let form = 
  forms.querySelector('form[id="${tables.value}"]');

if(form){
    subform_block.innerHTML = form.outerHTML;
} 
else {
    subform_block.innerHTML = "not found";
}
 }

querySelector не работает. Я подтвердил, что HTML-код отображается правильно и идентификаторы совпадают, но мой querySelector не может найти ни одну из форм. Что не так?

Answer 1

Изменено:

let form = forms.querySelector('form[id="${tables.value}"]');

до:

document.querySelector('form[id=' + tables.value + ']');

И это работает. Не уверен, почему $ {tables.value} не был правильно распознан