Привязать объект python к кнопке html

Question

У меня есть словарь Python, который создает список кнопок, то есть

recipes = {0 : {'name' : 'Chicken Ticka', 'products' : products_dict, 'instructions' : 'this are the instructions'},
                    1 : {'name' : 'Beef Masala', 'products' : products_dict_2, 'instructions' : 'this are the instructions for 2'}}

и в HTML:

{% if recipes is not none%}
            {% for key, value in recipes.items() %}
            <button type="button" class="btn btn-light btn-block">{{value['name']}}</button>
            {% endfor %}
            {% endif %}

И я хочу как-тообновить (обновить или динамически) страницу в соответствии с нажатой кнопкой.
Я знаю, как прикрепить кнопку к функции JS, но как прикрепить эту функцию к соответствующему объекту?

Answer 1

Это не совсем тот метод, который я имел в виду, но мне удалось получить желаемую функциональность:
Пример словаря:

products_dict = {0 : {'name' : '123', 'count' : '234'},1 : {'name' : '345', 'count' : '456'},2 : {'name' : '567', 'count' : '678'}}
    products_dict_2 = {0 : {'name' : 'bbb', 'count' : 'qwe'},1 : {'name' : 'wer', 'count' : 'ert'},2 : {'name' : 'rty', 'count' : 'tyu'}}
    recipes = {0 : {'name' : 'Chicken', 'products' : products_dict, 'instructions' : 'this are the instructions'},
                    1 : {'name' : 'Beef', 'products' : products_dict_2, 'instructions' : 'this are the instructions for 2'}}

Создание кнопок:

            {% if recipes is not none%}
            {% for key, recipe in recipes.items() %}
            <button id={{key}} onclick="uploadRecipe({{recipe}})" type="button" class="btn btn-light btn-block">{{recipe['name']}}</button>
            {% endfor %}
            {% endif %}

И функция uploadRecipe

<script>
    function uploadRecipe(recipe) {
        products = recipe['products'];
        var table = document.getElementById("recipeProducts").getElementsByTagName('tbody')[0];
        $("#recipeProducts tbody tr").remove();
        for (var prop in products) {
            var row = table.insertRow(0);
            var cell1 = row.insertCell(0);
            var cell2 = row.insertCell(1);
            cell1.innerHTML = products[prop]['name'].bold();
            cell2.innerHTML = products[prop]['count'].bold();
        }
        document.getElementById("recipe_instructions_text").innerHTML = recipe['instructions'];
    }
</script>