I am trying to dynamically render a category edit form in a Flask application. The HTML code appears correctly in the console but is not rendered on the screen. Below is the relevant code:
Python-Flask

@app.route('/edit_category_form/<category_id>', methods=['GET'])
def edit_category_form(category_id):
    # Fetch the category from the database
    category = Category.objects.get(id=category_id)

    # Pass the category to the template
    return render_template('edit_category.html', category=category)

JavaScript

window.toggleEditForm = function(categoryId) {
    console.log('toggleEditForm function called with categoryId:', categoryId);
    var editForm = document.getElementById('editForm' + categoryId);
    console.log('editForm:', editForm);
    if (editForm.style.display === 'block') {
        console.log('editForm is visible');
        // Send the AJAX request regardless of whether the editForm's innerHTML is empty or not
        $.ajax({
            url: '/edit_category_form/' + categoryId,
            method: 'GET',
            success: function(response) {
                console.log('AJAX request successful. Response:', response);
                editForm.innerHTML = response;
                console.log('GET /edit_category_form success', response);
            },
            error: function(jqXHR, textStatus, errorThrown) {
                console.log('AJAX request failed. Status:', textStatus, 'Error:', errorThrown);
                editForm.innerHTML = '<p>Error loading content.</p>';
            }
        });
        editForm.style.display = 'none';
    } else {
        editForm.style.display = 'block';
    }
}

$(document).ready(function() {
    $('.edit-button').click(function() {
        var categoryId = $(this).data('category-id');
        toggleEditForm(categoryId);
    });
});

Html-Bootstrap

<div class="container-fluid mt-1">
    <table class="table table-hover table-bordered">
        <tbody id="categoryTable">
            {% for category in categories %}
                <tr data-category-id="{{ category.id }}">
                    <td colspan="4">
                        <div class="row">
                            <div class="col-4">
                                <img src="{{ url_for('images', image_id=images[category.id].id) }}" alt="Category Image" width="50">
                            </div>
                            <div class="col-4 description-cell">{{ category.name }}</div>
                            <div class="col-4">
                                <button type="button" class="btn btn-primary btn-sm edit-button" data-category-id="{{ category.id }}">
                                    <i class="fas fa-edit"></i>
                                </button>
                                <button type="button" class="btn btn-danger btn-sm delete-button" onclick="deleteCategory('{{ category.id }}')">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-12 text-center">
                                <div class="edit-form" id="editForm{{ category.id }}" style="display: none;">
                                    <!-- Content for editing category -->
                                </div>
                            </div>
                        </div>
                    </td>
                </tr>
            {% endfor %}
        </tbody>
    </table>
</div>

Problem
When I click the edit button, the HTML code appears in the console but does not render on the screen. The toggleEditForm function is called, the AJAX request is successful, and the response contains the correct HTML content.

Question
Does anyone know why the HTML content is not being rendered on the screen even though it appears in the console? How can I fix this issue?

I tried to render the edit category html from within the category list html, I got the output of the html code from the console with an ajax request, that is, the edit_category html is written to the console with console.log, but it is not rendered to the screen.